feat：新增文档中心和版本日志等说明 #2587

src/frontend/devops-repository/package.json

@@ -14,13 +14,13 @@
   "dependencies": {
     "@blueking/notice-component-vue2": "^2.0.5",
     "@blueking/sub-saas": "0.0.0-beta.9",
-    "axios": "^1.7.7",
     "@vue-office/docx": "^1.6.2",
     "@vue-office/excel": "^1.7.11",
     "@vue-office/pdf": "^2.0.2",
     "@vue/composition-api": "^1.7.2",
+    "axios": "^1.7.7",
     "js-cookie": "^2.2.1",
-    "marked": "^4.0.8",
+    "marked": "^4.3.0",
     "qrcode": "^1.5.0",
     "vue-demi": "^0.14.6",
     "vue-i18n": "^8.18.1",

src/frontend/devops-repository/src/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="bkrepo-main flex-column">
         <notice-component v-if="!ciMode && !isSubSaas" api-url="/web/repository/api/notice" />
-        <Header v-if="!ciMode && !isSubSaas" />
+        <Header ref="head" v-if="!ciMode && !isSubSaas" />
         <router-view class="bkrepo-main-container"></router-view>
         <ConfirmDialog />
         <GlobalUploadViewport />
@@ -17,6 +17,7 @@
     import Login from '@repository/components/Login'
     import cookies from 'js-cookie'
     import { mapActions } from 'vuex'
+    import { getTrueVersion } from '@repository/utils/versionLogs'
     export default {
         components: { NoticeComponent, Header, Login },
         mixins: [mixin],
@@ -30,10 +31,18 @@
                 return subEnv
             }
         },
-        created () {
+        async created () {
             const username = cookies.get('bk_uid')
             username && this.SET_USER_INFO({ username })
             this.getPermissionDialogConfig()
+            const hasShowLog = cookies.get('hasShowLog') || ''
+            const logs = await getTrueVersion()
+            if (logs.length > 0 && !this.ciMode && !this.isSubSaas) {
+                this.$store.commit('SET_VERSION_LOGS', logs)
+                if (hasShowLog !== logs[0].version) {
+                    this.$refs.head.showVersionLogs()
+                }
+            }
             if (!this.isSubSaas && this.ciMode) {
                 this.loadDevopsUtils('/ui/devops-utils.js')
                 // 请求管理员信息

src/frontend/devops-repository/src/components/Header/index.vue

@@ -26,7 +26,8 @@
                 size="small"
                 :enable-virtual-scroll="projectList && projectList.length > 3000"
                 :list="projectList">
-                <bk-option v-for="option in projectList"
+                <bk-option
+                    v-for="option in projectList"
                     :key="option.id"
                     :id="option.id"
                     :name="option.name">
@@ -68,23 +69,46 @@
                         :class="['bkci-dropdown-item']"
                         @click="changeLanguage(item.id)">
                         <Icon class="mr5" :name="item.icon" style="vertical-align: top;margin-bottom: 2px;" size="20" />
-                        {{item.name}}
+                        {{ item.name }}
+                    </li>
+                </template>
+            </bk-popover>
+            <bk-popover
+                theme="light navigation-message"
+                placement="bottom"
+                :arrow="false"
+                trigger="click"
+                ref="popoverRef"
+                class="popover"
+            >
+                <div class="flag-box">
+                    <Icon name="help-document" size="20" />
+                </div>
+                <template slot="content">
+                    <li
+                        v-for="(item, index) in helps"
+                        :key="index"
+                        :class="['bkci-dropdown-item']"
+                        @click="clickHelps(item.id)">
+                        {{ $t(`helps.${item.name}`) }}
                     </li>
                 </template>
             </bk-popover>
         </div>
         <User />
         <project-info-dialog ref="projectInfoDialog"></project-info-dialog>
+        <version-log ref="versionLogDialog"></version-log>
     </div>
 </template>
 <script>
     import User from '@repository/components/User'
     import projectInfoDialog from '@repository/views/projectManage/projectInfoDialog'
     import { mapState, mapActions } from 'vuex'
     import cookies from 'js-cookie'
+    import VersionLog from '@repository/components/VersionLog'
     export default {
-        name: 'bkrepoHeader',
-        components: { User, projectInfoDialog },
+        name: 'BkrepoHeader',
+        components: { VersionLog, User, projectInfoDialog },
         props: {
             icons: {
                 type: Array,
@@ -108,11 +132,29 @@
                 curLang: {
                     id: '',
                     icon: ''
-                }
+                },
+                helps: [
+                    {
+                        name: 'documentation',
+                        id: 'documentation'
+                    },
+                    {
+                        name: 'releaseNote',
+                        id: 'releaseNote'
+                    },
+                    {
+                        name: 'feedback',
+                        id: 'feedback'
+                    },
+                    {
+                        name: 'openSource',
+                        id: 'openSource'
+                    }
+                ]
             }
         },
         computed: {
-            ...mapState(['projectList', 'userInfo']),
+            ...mapState(['projectList', 'userInfo', 'versionLogs']),
             projectId () {
                 return this.$route.params.projectId
             }
@@ -180,6 +222,32 @@
                 this.$router.replace({
                     name: 'projectManage'
                 })
+            },
+            clickHelps (id) {
+                switch (id) {
+                    case 'documentation':
+                        window.open('https://bk.tencent.com/docs/markdown/ZH/Devops/3.0/UserGuide/Services/Console/Console.md', '_blank')
+                        break
+                    case 'releaseNote':
+                        if (this.versionLogs.length > 0) {
+                            this.$refs.versionLogDialog.show = true
+                            this.$refs.versionLogDialog.versionLogs = this.versionLogs
+                            this.$refs.versionLogDialog.markdown = this.versionLogs[0].content
+                        }
+                        break
+                    case 'feedback':
+                        window.open('https://bk.tencent.com/s-mart/community/question', '_blank')
+                        break
+                    default:
+                        window.open('https://github.com/TencentBlueKing/bk-repo', '_blank')
+                }
+            },
+            showVersionLogs () {
+                if (this.versionLogs.length > 0) {
+                    this.$refs.versionLogDialog.show = true
+                    this.$refs.versionLogDialog.versionLogs = this.versionLogs
+                    this.$refs.versionLogDialog.markdown = this.versionLogs[0].content
+                }
             }
         }
     }
@@ -230,14 +298,36 @@
     }
 }
 .flag-box{
-    margin-top: 7px;
-    border-radius:15px;
-    width: 30px;
-    height: 30px;
-    display: flex;
     align-items: center;
+    border-radius: 50%;
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 16px;
+    height: 32px;
+    justify-content: center;
+    position: relative;
+    width: 32px;
+    margin-right: 8px;
+    color: #7b7d8a;
+    &:hover {
+        color: #f1ffff;
+        background-color: #253146;
+    }
+}
+.flag-box-help{
+    align-items: center;
+    border-radius: 50%;
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 16px;
+    height: 32px;
     justify-content: center;
+    position: relative;
+    width: 32px;
+    margin-right: 8px;
+    color: #7b7d8a;
     &:hover {
+        color: #f1ffff;
         background-color: #253146;
     }
 }

src/frontend/devops-repository/src/components/User/index.vue

@@ -56,9 +56,10 @@
     line-height: 32px;
     padding: 0 12px;
     align-items: center;
+    color: #7b7d8a;
     &:hover{
         cursor: pointer;
-        color: #1848DE;
+        color: #f1ffff;
     }
 }
 .flex-align-center {
@@ -93,7 +94,6 @@
     text-align: center;
     &:hover {
         background-color: #EAF3FF;
-        color: #6BA3FF;
     }
 }
 .bkrepo-user-container {