Ft 新版导航 (#110)

* deps: 引入vueuse; 升级依赖到最新的minor/patch版本 * feat: 新版导航部分样式 # Reviewed, transaction id: 15944 * feat: sdk使用说明代码块样式 * feat: sdk详情dialog基本样式和逻辑 * feat: 完成sdk详情dialog样式和部分类型声明 * feat: 完成tab类型provide/inject * feat: sdk下载逻辑 * feat: 新版组件API文档页面样式和逻辑 # Reviewed, transaction id: 16139 * feat: 新版组件API文档页右侧导航样式 # Reviewed, transaction id: 16161 * feat: 右侧导航固定 * feat: 导航跳转逻辑 * feat: 详情页顶部导航栏 * feat: 顶部导航栏aside切换 * feat: 文档详情页样式和结构 # Reviewed, transaction id: 16364 * feat: 资源维护人员编辑栏可控提交 # Reviewed, transaction id: 16477 * feat: 新版导航部分样式 * feat: 文档详情页左栏样式 * feat: 基本完成新版文档详情页样式和逻辑 # Reviewed, transaction id: 16620 * deps: yarn.lock # Reviewed, transaction id: 16622 * feat: 新版导航 * feat: 新版导航 * Merge branch 'master' into ft-navi # Reviewed, transaction id: 16871 * feat: 右侧导航跳转功能 # Reviewed, transaction id: 16958 * refactor: 整理代码和样式 * feat: sdk语言切换组件 * fix: 修复导航目录出现重名的情况 * feat: 网关 SDK 弹窗查看逻辑 # Reviewed, transaction id: 17003 * refactor: API文档抽离为新目录和路由 * feat: 完成sdk弹窗查看 * feat: 组件搜索器 * feat: 从文档详情页返回时保持tab状态 * feat: 系统快速跳转下拉菜单 * fix: 样式修复 * fix: 修复下拉跳转 * feat: SDK使用说明空数据提示 * feat: 组件sdk语言tag * fix: 修复系统下拉菜单显示逻辑问题 * feat: 完成网关SDK语言切换功能 * refactor: 表格自定义column的插槽改data=>row；类型标注； * fix: 网关sdk详情弹窗文本 * feat: 文档详情 loading 状态 # Reviewed, transaction id: 17189 * Merge branch 'master' into ft-navi # Reviewed, transaction id: 17190 * fix: 修复i18n问题 # Reviewed, transaction id: 17191 * fix: 修复i18n问题 # Reviewed, transaction id: 17192 * Merge remote-tracking branch 'origin/ft-navi' into ft-navi # Conflicts: # src/dashboard-front/src/language/lang.ts # Reviewed, transaction id: 17193 * chore: 添加注释；改用更语义化的变量名； # Reviewed, transaction id: 17208 * fix: 修复网关文档“是否需申请权限”文本 # Reviewed, transaction id: 17309 * chore: 整理代码 # Reviewed, transaction id: 17474
ielgnaw · Sep 9, 2024 · 8a08f65 · 8a08f65
1 parent b7f3a12
commit 8a08f65
Show file tree

Hide file tree

Showing 22 changed files with 3,860 additions and 165 deletions.
diff --git a/src/dashboard-front/package.json b/src/dashboard-front/package.json
@@ -28,18 +28,20 @@
     "@blueking/platform-config": "^1.0.3",
     "@blueking/release-note": "0.0.1-beta.14",
     "@vueuse/core": "^11.0.3",
+    "@vueuse/integrations": "^11.0.3",
     "art-template": "^4.13.2",
     "bkui-vue": "1.0.3-beta.58",
+    "change-case": "^5",
     "connect-history-api-fallback": "^2.0.0",
     "cookie": "^0.5.0",
     "cookie-parser": "^1.4.5",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.2",
+    "dayjs": "^1.11.12",
     "echarts": "^4.6.0",
     "eslint": "~7.30.0",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "express-art-template": "^1.0.1",
-    "highlight.js": "^11.9.0",
+    "highlight.js": "^11.10.0",
     "js-cookie": "^3.0.5",
     "js-yaml": "^4.1.0",
     "jsonpath-plus": "^9.0.0",
@@ -50,13 +52,13 @@
     "moment": "^2.29.4",
     "monaco-editor": "^0.44.0",
     "monaco-editor-webpack-plugin": "^7.0.0",
-    "pinia": "^2.0.23",
+    "pinia": "^2.2.2",
     "request": "^2.88.2",
-    "semver": "^7.6.0",
+    "semver": "^7.6.3",
     "transliteration": "^2.3.5",
-    "vue": "^3.4.27",
-    "vue-i18n": "^9.5.0",
-    "vue-router": "^4.1.6"
+    "vue": "^3.4.38",
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@blueking/babel-preset-bk": "2.1.0-beta.10",
@@ -67,29 +69,29 @@
     "@types/echarts": "^4.9.22",
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "^4.14.201",
+    "@types/lodash": "^4.17.7",
     "@types/markdown-it": "^13.0.7",
     "@types/node": "^20.6.3",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.20.0",
-    "enhanced-resolve": "^5.10.0",
+    "enhanced-resolve": "^5.17.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-vue": "^9.20.1",
+    "eslint-plugin-vue": "^9.27.0",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
-    "postcss": "~8.4.16",
+    "postcss": "^8.4.41",
     "postcss-import": "^15.0.0",
     "postcss-mixins": "^9.0.4",
-    "postcss-nested": "^6.0.0",
+    "postcss-nested": "^6.2.0",
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-preset-env": "^7.8.2",
     "postcss-simple-vars": "^7.0.0",
     "postcss-url": "^10.1.3",
-    "sass": "^1.52.3",
+    "sass": "^1.77.8",
     "sass-loader": "^13.0.0",
     "ts-loader": "^9.5.1",
-    "typescript": "5.4.5",
-    "vue-eslint-parser": "^9.4.2"
+    "typescript": "^5.5.4",
+    "vue-eslint-parser": "^9.4.3"
   },
   "engines": {
     "node": ">= 14.16.1",

diff --git a/src/dashboard-front/src/app.vue b/src/dashboard-front/src/app.vue
@@ -184,39 +184,46 @@ const headerList = computed(() => ([
     link: '',
   },
   {
-    name: t('网关API文档'),
+    name: t('API 文档'),
     id: 3,
-    url: 'apigwDoc',
+    url: 'apiDocs',
     enabled: true,
     link: '',
   },
-  {
-    name: t('组件API文档'),
-    id: 4,
-    url: 'componentDoc',
-    enabled: user.featureFlags?.MENU_ITEM_ESB_API_DOC,
-    link: '',
-  },
-  {
-    name: t('网关API SDK'),
-    id: 5,
-    params: {
-      type: 'apigateway',
-    },
-    url: 'apigwSDK',
-    enabled: user.featureFlags?.ENABLE_SDK,
-    link: '',
-  },
-  {
-    name: t('组件API SDK'),
-    id: 6,
-    params: {
-      type: 'esb',
-    },
-    url: 'esbSDK',
-    enabled: user.featureFlags?.ENABLE_SDK,
-    link: '',
-  },
+  // {
+  //   name: t('网关API文档'),
+  //   id: 3,
+  //   url: 'apigwDoc',
+  //   enabled: true,
+  //   link: '',
+  // },
+  // {
+  //   name: t('组件API文档'),
+  //   id: 4,
+  //   url: 'componentDoc',
+  //   enabled: user.featureFlags?.MENU_ITEM_ESB_API_DOC,
+  //   link: '',
+  // },
+  // {
+  //   name: t('网关API SDK'),
+  //   id: 5,
+  //   params: {
+  //     type: 'apigateway',
+  //   },
+  //   url: 'apigwSDK',
+  //   enabled: user.featureFlags?.ENABLE_SDK,
+  //   link: '',
+  // },
+  // {
+  //   name: t('组件API SDK'),
+  //   id: 6,
+  //   params: {
+  //     type: 'esb',
+  //   },
+  //   url: 'esbSDK',
+  //   enabled: user.featureFlags?.ENABLE_SDK,
+  //   link: '',
+  // },
 ]));
 
 const systemCls = ref('mac');
@@ -339,7 +346,7 @@ const goPage = (routeName: string) => {
     router.push({
       name: routeName,
       params: {
-        id: ['home', 'apigwDoc'].includes(routeName) ? '' : apigwId.value,
+        id: ['home', 'apigwDoc', 'apiDocs'].includes(routeName) ? '' : apigwId.value,
       },
     });
   }

diff --git a/src/dashboard-front/src/css/common.css b/src/dashboard-front/src/css/common.css
@@ -190,6 +190,9 @@
 .mb20 {
   margin-bottom: 20px !important;
 }
+.mb24 {
+  margin-bottom: 24px !important;
+}
 .mb25 {
   margin-bottom: 25px !important;
 }
@@ -211,6 +214,9 @@
 .ml0 {
   margin-left: 0px !important;
 }
+.ml4 {
+  margin-left: 4px !important;
+}
 .ml5 {
   margin-left: 5px !important;
 }
@@ -226,6 +232,9 @@
 .ml20 {
   margin-left: 20px !important;
 }
+.ml24 {
+  margin-left: 24px !important;
+}
 .ml25 {
   margin-left: 25px !important;
 }
@@ -265,6 +274,9 @@
 .mr20 {
   margin-right: 20px !important;
 }
+.mr24 {
+  margin-right: 24px !important;
+}
 .mr25 {
   margin-right: 25px !important;
 }
@@ -391,6 +403,9 @@
 .pl5 {
   padding-left: 5px !important;
 }
+.pl8 {
+  padding-left: 8px !important;
+}
 .pl10 {
   padding-left: 10px !important;
 }
@@ -424,6 +439,9 @@
 .pr5 {
   padding-right: 5px !important;
 }
+.pr8 {
+  padding-right: 8px !important;
+}
 .pr10 {
   padding-right: 10px !important;
 }
@@ -489,6 +507,10 @@
   width: 700px !important;
 }
 
+.fw-normal {
+  font-weight: normal;
+}
+
 .fw700{
   font-weight: 700;
 }

diff --git a/src/dashboard-front/src/hooks/use-max-table-limit.ts b/src/dashboard-front/src/hooks/use-max-table-limit.ts
@@ -0,0 +1,15 @@
+/**
+ * @description 获取表格最大显示行数
+ * @param {Number} heightTaken 已被占用不能用来展示表格行的高度，单位 px
+ * @param {Number} lineHeight 单行表格高度，单位 px
+ * @returns {Number} 最大显示行数, 最小为 1
+ */
+import { useWindowSize } from '@vueuse/core';
+import { toValue } from 'vue';
+
+export default function useMaxTableLimit(heightTaken = 347, lineHeight = 42) {
+  const viewportHeight = toValue(useWindowSize().height);
+  const heightToUse = viewportHeight - heightTaken;
+  const limit = Math.floor(heightToUse / lineHeight);
+  return limit > 0 ? limit : 1;
+}
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
@@ -690,7 +690,9 @@ const lang: ILANG = {
   '发布状态': ['Release Status'],
   '查看资源': ['View'],
   '克隆': ['Clone'],
-  '删除资源后，需要生成新的版本，并发布到目标环境才能生效': ['After deletion, a new version needs to be generated and released to the target stage to take effect'],
+  // 以下行有重复，暂时注释掉
+  // '删除资源后，需要生成新的版本，并发布到目标环境才能生效':
+  // ['After deletion, a new version needs to be generated and released to the target stage to take effect'],
   '请选择导出的格式': ['Select export format'],
   '选择全部资源': ['Select all resources'],
   '已选择全部资源': ['Selected all resources'],
@@ -1140,6 +1142,14 @@ const lang: ILANG = {
   '网关API文档': ['Gateway API Doc'],
   '组件API SDK': ['Component API SDK'],
   '网关API SDK': ['Gateway API SDK'],
+  '组件 API 文档': ['Component API Doc'],
+  '网关 API 文档': ['Gateway API Doc'],
+  '没有对应文档': ['No Doc'],
+  '组件 API SDK': ['Component API SDK'],
+  '网关 API SDK': ['Gateway API SDK'],
+  '网关 API SDK: {name}': ['Gateway API SDK: {name}'],
+  '查看 SDK': ['Check SDK'],
+  '下载 SDK': ['Download SDK'],
   '上下结构无侧栏导航': ['Top-down Structure Without Sidebar Navigation'],
   '跳转到 PC 端': ['Switch to PC Version'],
   '跳转到移动端': ['Switch to Mobile Version'],
@@ -1163,6 +1173,7 @@ const lang: ILANG = {
   '返回首页': ['Back to home'],
   '默认': ['Default'],
   '应用访问该网关API时，是否需提供应用认证信息': ['Whether the app needs to provide app authentication when accessing the API'],
+  '应用访问该网关API时，是否需要提供用户认证信息': ['Whether the app needs to provide user authentication when accessing the API'],
   '应用访问该组件API时，是否需要提供用户认证信息': ['Whether the app needs to provide user authentication when accessing the API'],
   '是否需申请权限': ['Permission Required'],
   '应用访问该网关API前，是否需要在开发者中心申请该网关API权限': ['Whether the app needs to apply for API permission in the Developer Center before accessing the API'],
@@ -1179,6 +1190,8 @@ const lang: ILANG = {
   '查看': ['View'],
   '未生成-doc': ['No SDK'],
   '若资源版本对应的SDK未生成，可联系网关负责人生成SDK': ['If the SDK corresponding to the resource version is not generated, you can contact the gateway maintainers to generate the SDK'],
+  'SDK未生成，可联系负责人生成SDK': ['SDK not generated, contact maintainers to generate it'],
+  '{lang} SDK未生成，可联系负责人生成SDK': ['{lang} SDK not generated, contact maintainers to generate it'],
   '网关API资源版本对应的SDK': ['The SDK corresponding to the resource version'],
   '所有系统': ['All Systems'],
   'API 列表': ['APIs'],
@@ -1192,8 +1205,11 @@ const lang: ILANG = {
   '网关最新SDK，对应已生成SDK的最新资源版本': ['The latest SDK of the gateway, corresponding to the latest resource version of the generated SDK'],
   'SDK版本': ['Version'],
   'SDK地址': ['URL'],
-  '在{resourceLength}个资源中搜索...': ['Search in {resourceLength} resources'],
+  '在{resourceLength}个{type}中搜索...': ['Search in {resourceLength} {type}'],
   'SDK使用样例': ['SDK Usage Sample'],
+  'SDK 使用说明': ['SDK Usage'],
+  'SDK 包名称': ['SDK Package Name'],
+  'SDK 最新版本': ['SDK Latest Version'],
   '网关当前环境【{curStageText}】对应的资源版本未生成 SDK，可联系网关负责人生成 SDK': ['Gateway resource version corresponding to the stage [{curStageText}] does not generate SDK, you can contact the gateway maintainers to generate SDK'],
   'SDK及示例': ['SDK & Sample'],
   'SDK信息-doc': ['SDK'],
@@ -1589,6 +1605,12 @@ const lang: ILANG = {
   '文件名需要跟资源名称完全一致才能导入，请检查文件名': ['Filename must matches resource name'],
   '已匹配到资源': ['Resource matched'],
   '未匹配到资源': ['Resource not matched'],
+  'API 地址': ['API Address'],
+  '公共请求参数': ['Common Request Parameter'],
+  '网关详情': ['Gateway Detail'],
+  '权限申请': ['Permission Required'],
+  '组件详情': ['Component Details'],
+  'API列表': ['API List'],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
   // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })

diff --git a/src/dashboard-front/src/router/index.ts b/src/dashboard-front/src/router/index.ts
@@ -8,6 +8,8 @@ import globalConfig from '@/constant/config';
 const { t } = i18n.global;
 
 const Home = () => import(/* webpackChunkName: "Home" */ '@/views/home.vue');
+const ApiDocs = () => import(/* webpackChunkName: "ApiDocs" */ '@/views/apiDocs/index.vue');
+const APIDocDetail = () => import(/* webpackChunkName: "ApiDocDetail" */ '@/views/apiDocs/doc-detail.vue');
 const ApigwDocs = () => import(/* webpackChunkName: "ApigwDocs" */ '@/views/apigwDocs/index.vue');
 const ApigwAPIDetail = () => import(/* webpackChunkName: "apigw-doc" */ '@/views/apigwDocs/components/detail.vue');
 const ApigwAPIDetailIntro = () => import(/* webpackChunkName: "apigw-doc" */ '@/views/apigwDocs/components/intro.vue');
@@ -319,6 +321,27 @@ const routes: RouteRecordRaw[] = [
     name: 'docsMain',
     component: docsComponent,
     children: [
+      {
+        path: 'apigw-api/:curTab?',
+        name: 'apiDocs',
+        component: ApiDocs,
+        meta: {
+          matchRoute: 'apiDocs',
+          topMenu: 'apiDocs',
+          notAppHeader: true,
+          isDocRouter: true,
+          isMenu: false,   // 是否作为侧边栏菜单
+        },
+      },
+      {
+        path: ':curTab/:targetName/:componentName?',
+        name: 'apiDocDetail',
+        component: APIDocDetail,
+        meta: {
+          matchRoute: 'apiDocDetail',
+          topMenu: 'apiDocs',
+        },
+      },
       {
         path: 'apigw-api',
         name: 'apigwDoc',