feat：平台管理-代码源管理 TencentBlueKing#11379

# Reviewed, transaction id: 29526

src/frontend/devops-platform/.env

@@ -0,0 +1,3 @@
+# .env.development 开发模式生效
+VITE_AJAX_URL_PREFIX='/'
+DEV=''

src/frontend/devops-platform/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  extends: ['@blueking/eslint-config-bk/tsvue3'],
+  parserOptions: {
+    "ecmaVersion": "latest",
+    project: [
+      './tsconfig.json',
+    ],
+  },
+  rules: {
+    "indent": [
+      "warn",
+      2
+    ]
+  }
+};

src/frontend/devops-platform/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

src/frontend/devops-platform/package.json

@@ -4,38 +4,60 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": " vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "bkui-vue": "1.0.3-beta.9",
+    "bkui-vue": "2.0.1-beta.94",
+    "dayjs": "^1.11.2",
+    "lodash": "^4.17.21",
+    "pinia": "^2.1.7",
+    "postcss": "^8.5.1",
     "vue": "^3.5.13",
     "vue-i18n": "^9.10.2",
-    "vue-router": "^4.3.0",
-    "pinia": "^2.1.7",
-    "dayjs": "^1.11.2",
-    "lodash": "^4.17.21"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@eslint/js": "^10.0.0",
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20.11.28",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
-    "lodash-es": "^4.17.21",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "typescript": "~5.4.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "globals": "^15.14.0",
     "jsdom": "^24.0.0",
-    "vite-plugin-vue-devtools": "^7.0.18",
+    "lodash-es": "^4.17.21",
+    "postcss-import": "^14.1.0",
+    "start-server-and-test": "^2.0.3",
+    "stylelint": "^16.13.2",
+    "stylelint-config-standard": "^37.0.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.4.0",
+    "typescript-eslint": "^8.20.0",
     "vite": "^6.0.5",
-    "start-server-and-test": "^2.0.3"
+    "vite-plugin-vue-devtools": "^7.0.18"
+  },
+  "nx": {
+    "targets": {
+      "public:master": {
+        "inputs": [
+          "{workspaceRoot}/locale/metrics/*.json",
+          "{projectRoot}"
+        ],
+        "outputs": [
+          "{workspaceRoot}/frontend/metrics"
+        ]
+      }
+    }
   }
 }

src/frontend/devops-platform/postcss.config.js

@@ -0,0 +1,9 @@
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+export default {
+    plugins: [
+        tailwindcss,
+        autoprefixer,
+    ],
+}

src/frontend/devops-platform/src/App.tsx

@@ -7,18 +7,17 @@ import enLang from 'bkui-vue/dist/locale/en.esm';
 import zhLang from 'bkui-vue/dist/locale/zh-cn.esm';
 
 export default defineComponent({
-    name: 'App',
-    setup() {
-      const { locale } = useI18n();
-      const lang = computed(() => {
-        if (locale.value === EN_LOCALE) {
-          return enLang;
-        }
-        return zhLang;
-      });
-      return () => (
-        <div>123</div>
-      );
-    },
+  name: 'App',
+  setup() {
+    const { locale } = useI18n();
+    const lang = computed(() => {
+      if (locale.value === EN_LOCALE) {
+        return enLang;
+      }
+      return zhLang;
+    });
+    return () => (
+      <RouterView />
+    );
+  },
 });
-

src/frontend/devops-platform/src/common/auth-model.ts

@@ -0,0 +1,87 @@
+interface ILoginData {
+  login_url?: string,
+  target?: string
+}
+
+const getLoginUrl = () => {
+  var cUrl = `${location.origin}/public/login_success.html?is_ajax=1`;
+  if (/=%s/.test(import.meta.env.VITE_LOGIN_SERVICE_URL)) {
+    return import.meta.env.VITE_LOGIN_SERVICE_URL.replace(/%s/, cUrl)
+  } else {
+    const loginUrl = new URL(import.meta.env.VITE_LOGIN_SERVICE_URL)
+    if (/=$/.test(loginUrl.search)) {
+      return import.meta.env.VITE_LOGIN_SERVICE_URL + cUrl
+    } else {
+      loginUrl.searchParams.append('c_url', cUrl)
+      return loginUrl.href
+    }
+  }
+}
+
+/** 无权限弹窗 */
+class AuthModel {
+  isShow: boolean;
+  loginWindow: Window;
+  checkWindowTimer: number;
+
+  constructor() {
+    this.isShow = false;
+    this.loginWindow = null;
+    this.checkWindowTimer = -1;
+    window.addEventListener('message', this.messageListener.bind(this), false);
+  }
+  showLoginModal(data: ILoginData = {}) {
+    if (this.isShow) return;
+    this.isShow = true;
+    let url = data.login_url;
+    if (!url) {
+      url = getLoginUrl()
+    }
+    const width = 700;
+    const height = 510;
+    const { availHeight, availWidth } = window.screen;
+    this.loginWindow = window.open(url, '_blank', `
+      width=${width},
+      height=${height},
+      left=${(availWidth - width) / 2},
+      top=${(availHeight - height) / 2},
+      channelmode=0,
+      directories=0,
+      fullscreen=0,
+      location=0,
+      menubar=0,
+      resizable=0,
+      scrollbars=0,
+      status=0,
+      titlebar=0,
+      toolbar=0,
+      close=0
+    `);
+    this.checkWinClose();
+  }
+  checkWinClose() {
+    this.checkWindowTimer && clearTimeout(this.checkWindowTimer);
+    this.checkWindowTimer = setTimeout(() => {
+      if (!this.loginWindow || this.loginWindow.closed) {
+        this.hideLoginModal();
+        clearTimeout(this.checkWindowTimer);
+        return;
+      }
+      this.checkWinClose();
+    }, 300);
+  }
+  messageListener({ data = {} }: MessageEvent) {
+    if (data === null || typeof data !== 'object' || data.target !== 'bk-login' || !this.loginWindow) return;
+
+    this.hideLoginModal();
+  }
+  hideLoginModal() {
+    this.isShow = false;
+    if (this.loginWindow) {
+      this.loginWindow.close();
+    }
+    this.loginWindow = null;
+  }
+}
+
+export default new AuthModel();

src/frontend/devops-platform/src/common/constants.ts

@@ -0,0 +1,15 @@
+// import { ProgressStatus, UpgradeStatus } from '@/types';
+
+export const BASE_PREFIX = import.meta.env.DEV ? '/ms' : '';
+export const STORE_TYPE = 'DEVX';
+
+export const OWNER_PERMISSION_LIST = ['开发', '版本发布', '私有配置', '可见范围', '审批', '成员管理'];
+export const DEVELOPER_PERMISSION_LIST = ['开发', '版本发布', '私有配置'];
+
+export const STEP_CODES = {
+  COMMIT: 'commit',
+  BUILD: 'build',
+  TEST: 'test',
+  EDIT: 'edit',
+  APPROVE: 'approve',
+};

src/frontend/devops-platform/src/common/util.ts

@@ -2,22 +2,22 @@ import dayjs from 'dayjs';
 
 // 获取 cookie
 export function getCookie(name: string): string {
-    try {
-        const decodedCookie = decodeURIComponent(document.cookie);
-        const cookies = decodedCookie.split(';');
-        for (const cookie of cookies) {
-        const [key, value] = cookie.trim().split('=');
-        if (key === name) {
-            return value;
-        }
-        }
-        return '';
-    } catch (e) {
-        console.error('get cookie error', e);
-        return '';
+  try {
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const cookies = decodedCookie.split(';');
+    for (const cookie of cookies) {
+      const [key, value] = cookie.trim().split('=');
+      if (key === name) {
+        return value;
+      }
     }
+    return '';
+  } catch (e) {
+    console.error('get cookie error', e);
+    return '';
+  }
 }
-  
+
 /**
  * 检查是不是 object 类型
  * @param item

src/frontend/devops-platform/src/components/paltform-header.tsx

@@ -0,0 +1,18 @@
+import {
+  defineComponent,
+} from 'vue';
+
+
+export default defineComponent({
+  props: {
+    title: String,
+  },
+
+  setup(props, { slots }) {
+    return () => (
+      <h3 class="bg-white h-[52px] leading-[52px] pl-[24px] text-[16px] text-[#313238] shadow-3xl">
+        {slots.default?.() ?? props.title}
+      </h3>
+    );
+  },
+});

src/frontend/devops-platform/src/css/index.css

@@ -1,2 +1,6 @@
 @import url(./main.css);
 @import url(./reset.css);
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/frontend/devops-platform/src/css/main.css

@@ -1,5 +1,9 @@
-.app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#app {
+  font-family: -apple-system,PingFang SC,BlinkMacSystemFont,Microsoft YaHei,Helvetica Neue,Arial;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
@@ -13,3 +17,24 @@
   display: flex;
   flex-direction: column;
 }
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-thumb {
+  height: 9px;
+  border-radius: 20px;
+  background-color: #c4c6cc;
+}
+
+.check-popper::before {
+  content: '';
+  position: absolute;
+  top: -8px;
+  left: 28px;
+  transform: rotate(45deg);
+  border-width: 8px;
+  border-style: solid;
+  border-color: #FAFBFD;
+  box-shadow: -1px -1px 0 0 #DCDEE5;
+}

src/frontend/devops-platform/src/css/reset.css

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 /*CSS Reset*/
 html,
 body,

src/frontend/devops-platform/src/http/api.ts

@@ -0,0 +1,16 @@
+import {
+  TargetNetBehavior,
+} from '@/types';
+import { STORE_TYPE, BASE_PREFIX } from '@/common/constants';
+import fetch from './fetch';
+
+const projectPerfix = '/project/api/user';
+const storeApiPerfix = '/store/api/user';
+const repositoryApiPerfix = '/repository/api/user';
+const remotedevApiPerfix = '/remotedev/api';
+
+export default {
+  getUser() {
+    return fetch.get(`${projectPerfix}/users`);
+  },
+};