From b3ef0e08488bf7865309798f0ae18d0d2e7f704d Mon Sep 17 00:00:00 2001
From: xzx <563905150@qq.com>
Date: Tue, 19 Jan 2021 11:36:48 +0800
Subject: [PATCH 1/3] rewrite updated package of security

---
 .../components/security/bulletinDetail.vue    | 198 ++++++++++++++----
 .../.vuepress/lang/lang-modules/security.js   |   6 +
 2 files changed, 167 insertions(+), 37 deletions(-)

diff --git a/web-ui/docs/.vuepress/components/security/bulletinDetail.vue b/web-ui/docs/.vuepress/components/security/bulletinDetail.vue
index b7e052ee..4529a1d7 100644
--- a/web-ui/docs/.vuepress/components/security/bulletinDetail.vue
+++ b/web-ui/docs/.vuepress/components/security/bulletinDetail.vue
@@ -6,29 +6,51 @@
             <h2>{{detailData.securityNoticeNo}}</h2>
             <p>{{i18n.security.SYNOPSIS}}: {{detailData.summary}}</p>
             <p>{{i18n.security.RELEASE_DATE}}: {{detailData.announcementTime}}</p>
-            <h2>{{i18n.security.BRIEF_INTRODUCTION}}</h2>
-            <p>{{detailData.introduction}}</p>
-            <h2>{{i18n.security.SEVERITY}}</h2>
-            <p>{{detailData.type}}</p>
-            <h2>{{i18n.security.THEME}}</h2>
-            <p>{{detailData.subject}}</p>
-            <h2>{{i18n.security.DESCRIPTION}}</h2>
-            <p>{{detailData.description}}</p>
-            <h2>{{i18n.security.AFFECTED_COMPONENTS}}</h2>
-            <p>{{detailData.affectedComponent}}</p>
-            <h2>{{i18n.security.AFFECTED_PRODUCTS}}</h2>
-            <p>{{detailData.affectedProduct}}</p>
-            <h2>CVE</h2>
-            <div class="link-group">
-                <a v-for="(item, index) in detailData.cveId.split(';')" :key="index" @click="go(item)">{{item}}</a>    
+            <div class="tabs">
+                <div v-for="item in tabsList" :class="{'tab-item': true, 'active': item.id===curTab}" @click="curTab=item.id">{{item.name}}</div>
             </div>
-            <h2>{{i18n.security.PACKAGE}}</h2>
-            <div class="link-group">
-                <a v-for="(item, index) in detailData.packageName.split(';')" @click="open(item)">{{item}}</a>    
+            <div v-show="curTab===1">
+                <h2>{{i18n.security.BRIEF_INTRODUCTION}}</h2>
+                <p>{{detailData.introduction}}</p>
+                <h2>{{i18n.security.SEVERITY}}</h2>
+                <p>{{detailData.type}}</p>
+                <h2>{{i18n.security.THEME}}</h2>
+                <p>{{detailData.subject}}</p>
+                <h2>{{i18n.security.DESCRIPTION}}</h2>
+                <p>{{detailData.description}}</p>
+                <h2>{{i18n.security.AFFECTED_COMPONENTS}}</h2>
+                <p>{{detailData.affectedComponent}}</p>
+                <h2>CVE</h2>
+                <div class="link-group">
+                    <a v-for="(item, index) in detailData.cveId.split(';')" :key="index" @click="go(item)">{{item}}</a>    
+                </div>
+                <h2>{{i18n.security.REFERENCE_DOCUMENTS}}</h2>
+                <div class="link-group">
+                    <a :href="item.url" target="_blank" v-for="(item, index) in detailData.referenceList">{{item.url}}</a>    
+                </div>    
             </div>
-            <h2>{{i18n.security.REFERENCE_DOCUMENTS}}</h2>
-            <div class="link-group">
-                <a :href="item" target="_blank" v-for="(item, index) in detailData.referenceDocuments.split('\n')" @click="open(item)">{{item}}</a>    
+            <div v-show="curTab===2">
+                <div class="package-list-wraper" v-for="item in detailData.packageHelperList">
+                    <h1>{{item.productName}}</h1>
+                    <ul class="package-list" v-for="item1 in item.child">
+                        <li class="item">
+                            <ul>
+                                <li>{{item1.productName}}</li>
+                            </ul>
+                        </li>
+                        <li class="item" v-for="item2 in item1.child">
+                            <ul>
+                                <li>
+                                    {{item2.packageName}}
+                                </li>
+                                <li v-if="item2.sha256">
+                                    {{item2.sha256}}
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>    
+                </div>
+                
             </div>
             
         </div>
@@ -36,7 +58,7 @@
 </template>
 
 <script>
-import { securityDetail, getDownloadUrl } from "../../api/security"
+import { securityDetail } from "../../api/security"
 let that = null;
 
 const locationMethods = {
@@ -58,17 +80,6 @@ const locationMethods = {
             that.$message.error(data);
             that.loading = false;
         });
-    },
-    getDownloadUrl (id) {
-        getDownloadUrl({
-            id
-        })
-        .then(data => {
-            window.open(data.packageLink);
-        })
-        .catch(data => {
-            that.$message.error(data);
-        });
     }
 }
 export default {
@@ -80,7 +91,18 @@ export default {
                 cveId: '',
                 packageName: '',
                 referenceDocuments: ''
-            }
+            },
+            tabsList: [
+                {
+                    name: that.i18n.security.OVERVIEW,
+                    id: 1
+                },
+                {
+                    name: that.i18n.security.UPDATED_PACKAGES,
+                    id: 2
+                }
+            ],
+            curTab: 1
         };
     },
     created () {
@@ -97,9 +119,6 @@ export default {
                 path: this.resolvePath('/security/cve/detail.html'),
                 query: {id}
             })
-        },
-        open(id) {
-            locationMethods.getDownloadUrl(id);
         }
     }
 };
@@ -127,6 +146,111 @@ export default {
         }
     }
     .bulletinInner {
+        .tabs {
+            margin-bottom: 40px;
+            .tab-item {
+                display: inline-block;
+                font-size: 20px;
+                line-height: 40px;
+                color: rgba(0, 0, 0, .5);
+                margin-right: 50px;
+                cursor: pointer;
+            }
+            .active {
+                color: #000;
+                border-bottom: 2px solid #002fa7;
+            }
+            @media (max-width: 1000px) {
+                margin-bottom: 30px;
+                .tab-item {
+                    font-size: 16px;
+                    line-height: 36px;
+                    margin-right: 40px;
+                }
+            }
+        }
+        .package-list-wraper {
+            &>h1 {
+                font-size: 24px;
+                font-weight: normal;
+                line-height: 24px;
+                margin-bottom: 30px;
+                @media (max-width: 1000px) {
+                    font-size: 16px;
+                    margin-bottom: 20px;
+                }
+            }
+        }
+        .package-list {
+            margin-bottom: 40px;
+            @media (max-width: 1000px) {
+                margin-bottom: 30px;
+            }
+            .item:first-child {
+                li {
+                color: #000 !important;
+                font-size: 16px !important;
+                }
+            }
+            .item > ul {
+                height: 60px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.85);
+                margin: 0 30px;
+
+                li {
+                    color: rgba(0, 0, 0, .5) !important;
+                }
+                li:nth-child(2) {
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.85);
+                text-align: center;
+                }
+                li:nth-child(3) {
+                font-size: 14px;
+                text-align: right;
+                color: rgba(0, 0, 0, 0.85);
+                }
+                li:nth-child(4) {
+                font-size: 14px;
+                text-align: right;
+                color: rgba(0, 0, 0, 0.85);
+                }
+                li {
+                flex: 1;
+                span {
+                    display: none;
+                }
+                }
+            }
+            .item:nth-child(odd) {
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+            @media (max-width: 1000px) {
+                .item > ul {
+                    height: 52px;
+                    margin: 0 10px;
+                    font-size: 12px;
+                    &:first-child {
+                        font-size: 14px;
+                    }
+                    li:first-child {
+                        font-size: 12px;
+                        color: #000;
+                    }
+                }
+                margin-bottom: 30px;
+                .item:first-child {
+                    li {
+                        color: #000 !important;
+                        font-size: 14px !important;
+                    }
+                }
+            }
+        }
         h1 {
             font-size: 36px;
             margin-bottom: 104px;
diff --git a/web-ui/docs/.vuepress/lang/lang-modules/security.js b/web-ui/docs/.vuepress/lang/lang-modules/security.js
index 8f8ecb4a..6e5099a8 100644
--- a/web-ui/docs/.vuepress/lang/lang-modules/security.js
+++ b/web-ui/docs/.vuepress/lang/lang-modules/security.js
@@ -4,6 +4,8 @@
 
 module.exports = {
     cn: {
+        OVERVIEW: '概述',
+        UPDATED_PACKAGES: '更新的软件包',
         SECURITY_ADVISORIES: '安全公告',
         SECURITY_ADVISORIES_NAME: '公告名',
         SEARCH: '搜索',
@@ -57,6 +59,8 @@ module.exports = {
         STATUS: '状态',
     },
     en: {
+        OVERVIEW: 'Overview',
+        UPDATED_PACKAGES: 'Updated software packages',
         SECURITY_ADVISORIES: 'Security Advisories',
         SECURITY_ADVISORIES_NAME: 'Title',
         SEARCH: 'Search',
@@ -110,6 +114,8 @@ module.exports = {
         STATUS: 'Status',
     },
     ru: {
+        OVERVIEW: 'Краткое описание',
+        UPDATED_PACKAGES: 'Обновленные пакеты ПО',
         SECURITY_ADVISORIES: 'Консультанты по безопасности',
         SECURITY_ADVISORIES_NAME: 'Title',
         SEARCH: 'Поиск',
-- 
Gitee


From 520bca02140d26794f015608d882f92a24d0ddc0 Mon Sep 17 00:00:00 2001
From: xzx <563905150@qq.com>
Date: Tue, 19 Jan 2021 16:23:25 +0800
Subject: [PATCH 2/3] rewrite updated package of security

---
 .../components/security/bulletinDetail.vue    | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/web-ui/docs/.vuepress/components/security/bulletinDetail.vue b/web-ui/docs/.vuepress/components/security/bulletinDetail.vue
index 4529a1d7..d3188975 100644
--- a/web-ui/docs/.vuepress/components/security/bulletinDetail.vue
+++ b/web-ui/docs/.vuepress/components/security/bulletinDetail.vue
@@ -191,9 +191,14 @@ export default {
                 color: #000 !important;
                 font-size: 16px !important;
                 }
+                ul:first-child {
+                    height: 60px;
+                    @media (max-width: 1000px) {
+                        height: 52px;
+                    }
+                }
             }
             .item > ul {
-                height: 60px;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
@@ -205,33 +210,39 @@ export default {
                     color: rgba(0, 0, 0, .5) !important;
                 }
                 li:nth-child(2) {
-                font-size: 14px;
-                color: rgba(0, 0, 0, 0.85);
-                text-align: center;
+                    font-size: 14px;
+                    color: rgba(0, 0, 0, 0.85);
+                    text-align: center;
                 }
                 li:nth-child(3) {
-                font-size: 14px;
-                text-align: right;
-                color: rgba(0, 0, 0, 0.85);
+                    font-size: 14px;
+                    text-align: right;
+                    color: rgba(0, 0, 0, 0.85);
                 }
                 li:nth-child(4) {
-                font-size: 14px;
-                text-align: right;
-                color: rgba(0, 0, 0, 0.85);
+                    font-size: 14px;
+                    text-align: right;
+                    color: rgba(0, 0, 0, 0.85);
                 }
                 li {
-                flex: 1;
+                    flex: 1;
+                    line-height: 32px;
+                    @media (max-width: 1000px) {
+                        line-height: 24px;
+                    }
                 span {
                     display: none;
                 }
                 }
             }
-            .item:nth-child(odd) {
+            .item:nth-child(1) {
                 background-color: rgba(0, 0, 0, 0.05);
             }
+            .item {
+                background-color: rgba(0, 0, 0, 0.02);
+            }
             @media (max-width: 1000px) {
                 .item > ul {
-                    height: 52px;
                     margin: 0 10px;
                     font-size: 12px;
                     &:first-child {
-- 
Gitee


From 74f0931f66276d6c31f6ff916929a904c060f222 Mon Sep 17 00:00:00 2001
From: xzx <563905150@qq.com>
Date: Wed, 20 Jan 2021 10:14:09 +0800
Subject: [PATCH 3/3] rewrite updated package of security

---
 .../components/security/bulletinDetail.vue    | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/web-ui/docs/.vuepress/components/security/bulletinDetail.vue b/web-ui/docs/.vuepress/components/security/bulletinDetail.vue
index d3188975..f5a87fe6 100644
--- a/web-ui/docs/.vuepress/components/security/bulletinDetail.vue
+++ b/web-ui/docs/.vuepress/components/security/bulletinDetail.vue
@@ -191,59 +191,57 @@ export default {
                 color: #000 !important;
                 font-size: 16px !important;
                 }
-                ul:first-child {
-                    height: 60px;
-                    @media (max-width: 1000px) {
-                        height: 52px;
-                    }
+            }
+            .item:first-child > ul {
+                height: 60px;
+                @media (max-width: 1000px) {
+                    height: 50px;
                 }
             }
             .item > ul {
+                height: 46px;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 font-size: 14px;
                 color: rgba(0, 0, 0, 0.85);
-                margin: 0 30px;
-
+                @media (max-width: 1000px) {
+                    height: 38px !important;
+                }
                 li {
                     color: rgba(0, 0, 0, .5) !important;
                 }
                 li:nth-child(2) {
-                    font-size: 14px;
-                    color: rgba(0, 0, 0, 0.85);
-                    text-align: center;
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.85);
+                text-align: center;
                 }
                 li:nth-child(3) {
-                    font-size: 14px;
-                    text-align: right;
-                    color: rgba(0, 0, 0, 0.85);
+                font-size: 14px;
+                text-align: right;
+                color: rgba(0, 0, 0, 0.85);
                 }
                 li:nth-child(4) {
-                    font-size: 14px;
-                    text-align: right;
-                    color: rgba(0, 0, 0, 0.85);
+                font-size: 14px;
+                text-align: right;
+                color: rgba(0, 0, 0, 0.85);
                 }
                 li {
-                    flex: 1;
-                    line-height: 32px;
-                    @media (max-width: 1000px) {
-                        line-height: 24px;
-                    }
+                flex: 1;
                 span {
                     display: none;
                 }
                 }
             }
-            .item:nth-child(1) {
-                background-color: rgba(0, 0, 0, 0.05);
-            }
             .item {
-                background-color: rgba(0, 0, 0, 0.02);
+                border-top: 1px solid rgba(0, 0, 0, .15);
+            }
+            .item:first-child {
+                border: none;
             }
             @media (max-width: 1000px) {
                 .item > ul {
-                    margin: 0 10px;
+                    height: 52px;
                     font-size: 12px;
                     &:first-child {
                         font-size: 14px;
-- 
Gitee