Project-HAMi · Nimbus318 · Dec 3, 2025 · Dec 3, 2025
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -41,6 +41,8 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
           tags: projecthami/hami-webui-fe-oss:${{ steps.branch-names.outputs.tag || steps.branch-names.outputs.current_branch == 'main' && 'main' || format('pr-{0}', github.run_number) }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
   build-and-push-backend:
     name: Build and Push Backend Image
@@ -71,3 +73,5 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
           tags: projecthami/hami-webui-be-oss:${{ steps.branch-names.outputs.tag || steps.branch-names.outputs.current_branch == 'main' && 'main' || format('pr-{0}', github.run_number) }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/Dockerfile b/Dockerfile
@@ -1,12 +1,16 @@
-FROM node:21.6.2 AS builder
+FROM --platform=$BUILDPLATFORM node:21.6.2 AS builder
 
 WORKDIR /src
 
-RUN npm install -g pnpm
+# Cache dependencies
+COPY package.json yarn.lock ./
+COPY packages/web/package.json packages/web/
+RUN yarn install --frozen-lockfile
 
 COPY . .
 
-RUN make build-all
+# Build
+RUN make build-bff build-web
 
 FROM node:21.6.2-slim
 

diff --git a/Makefile b/Makefile
@@ -10,34 +10,34 @@ DISABLED_PROJECTS?=""
 
 .PHONY: install-modules
 install-modules:
-	pnpm install
+	yarn install
 
 .PHONY: build-all
 build-all: install-modules build-bff build-web
 
 .PHONY: build-bff
 build-bff:
-	pnpm run build
+	yarn run build
 
 .PHONY: build-web
 build-web:
-	cd packages/web && pnpm run build
+	yarn workspace hami-webui-web run build
 
 .PHONY: start-dev
 start-dev: install-modules start-bff start-web
 
 
 .PHONY: start-bff
 start-bff:
-	pnpm run start:dev &
+	yarn run start:dev &
 
 .PHONY: start-web
 start-web:
-	cd packages/web && pnpm run start:dev
+	yarn workspace hami-webui-web run start:dev
 
 .PHONY: start-prod
 start-prod:
-	pnpm run start:prod
+	yarn run start:prod
 
 .PHONY: build-image
 build-image:

diff --git a/package.json b/package.json
@@ -5,6 +5,9 @@
   "author": "",
   "private": true,
   "license": "UNLICENSED",
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",

diff --git a/packages/web/index.html b/packages/web/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="/favicon.svg">
+    <base href="/"/>
+    <title>HAMi</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but HAMi doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+
+    <div id="app"></div>
+    <script type="module" src="/src/entry-vite.js"></script>
+  </body>
+</html>
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,15 +1,18 @@
 {
-  "name": "",
+  "name": "hami-webui-web",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "export NODE_ENV=development && vue-cli-service serve",
-    "start:dev": "export NODE_ENV=development && vue-cli-service serve",
-    "startWin:dev": "setx NODE_ENV development && vue-cli-service serve",
+    "start": "vite",
+    "start:dev": "vite",
+    "start:webpack": "export NODE_ENV=development && vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",
-    "build": "vue-cli-service build",
+    "build": "vite build",
+    "build:webpack": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
+    "dev": "vite",
+    "build:vite": "vite build",
     "new": "plop",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
@@ -28,6 +31,7 @@
     "echarts": "5.4.3",
     "element-plus": "^2.4.1",
     "generate-avatar": "1.4.10",
+    "iframe-resizer": "^4.3.2",
     "js-cookie": "3.0.5",
     "lodash": "^4.17.21",
     "node-polyfill-webpack-plugin": "^2.0.1",
@@ -44,12 +48,13 @@
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.0",
     "vuex-persistedstate": "^4.1.0",
-    "iframe-resizer": "^4.3.2",
     "web-storage-cache": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/babel-plugin-jsx": "^1.1.5",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
@@ -66,6 +71,9 @@
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "svg-sprite-loader": "^6.0.9",
+    "vite": "^5.0.0",
+    "vite-plugin-node-polyfills": "^0.24.0",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-cli-plugin-element-plus": "~0.0.13"
   },
   "browserslist": [

diff --git a/packages/web/projects/vgpu/components/gauge.vue b/packages/web/projects/vgpu/components/gauge.vue
@@ -14,7 +14,7 @@
 <script setup>
 import EchartsPlus from '@/components/Echarts-plus.vue';
 import getOptions from './config';
-import { defineProps } from 'vue';
+
 
 const props = defineProps([
   'title',

diff --git a/packages/web/projects/vgpu/components/timeSelect.vue b/packages/web/projects/vgpu/components/timeSelect.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, defineModel } from 'vue';
+import { ref } from 'vue';
 
 const time = defineModel();
 

diff --git a/packages/web/projects/vgpu/components/usage.vue b/packages/web/projects/vgpu/components/usage.vue
@@ -28,7 +28,7 @@
 <script setup>
 import Block from '~/vgpu/views/monitor/overview/Block.vue';
 import monitorApi from '~/vgpu/api/monitor';
-import { onMounted, ref, defineProps} from 'vue';
+import { onMounted, ref } from 'vue';
 import EchartsPlus from '@/components/Echarts-plus.vue';
 import getOptions from './config';
 import { getDataByPath } from '@/utils';

diff --git a/packages/web/projects/vgpu/views/card/admin/Detail.vue b/packages/web/projects/vgpu/views/card/admin/Detail.vue
@@ -91,7 +91,7 @@
 import BackHeader from '@/components/BackHeader.vue';
 import { useRoute } from 'vue-router';
 import BlockBox from '@/components/BlockBox.vue';
-import { onMounted, ref, watch, defineProps } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import TaskList from '~/vgpu/views/task/admin/index.vue';
 import {ElPopover} from 'element-plus';
 import Gauge from '~/vgpu/components/gauge.vue';

diff --git a/packages/web/projects/vgpu/views/card/admin/index.vue b/packages/web/projects/vgpu/views/card/admin/index.vue
@@ -31,7 +31,7 @@ import cardApi from '~/vgpu/api/card';
 import { useRouter } from 'vue-router';
 import searchSchema from '~/vgpu/views/card/admin/searchSchema';
 import PreviewBar from '~/vgpu/components/previewBar.vue';
-import { defineProps, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { roundToDecimal } from '@/utils';
 
 const props = defineProps(['hideTitle', 'filters']);

diff --git a/packages/web/projects/vgpu/views/task/admin/index.vue b/packages/web/projects/vgpu/views/task/admin/index.vue
@@ -33,7 +33,7 @@ import {calculateDuration, roundToDecimal, timeParse} from '@/utils';
 import { QuestionFilled } from '@element-plus/icons-vue';
 import api from '~/vgpu/api/task';
 import {ElMessage, ElMessageBox, ElPopover} from 'element-plus';
-import { reactive, ref, defineProps } from 'vue';
+import { reactive, ref } from 'vue';
 import editSchema from './editSchema';
 import { mapValues, isNumber, pick } from 'lodash';
 import { useRouter } from 'vue-router';

diff --git a/packages/web/src/components/ButtonGroup.vue b/packages/web/src/components/ButtonGroup.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="jsx">
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 import { renderProps } from '@/utils';
 
 const props = defineProps({

diff --git a/packages/web/src/components/DetailDrawer.vue b/packages/web/src/components/DetailDrawer.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="jsx">
-import { ref, defineProps, isVNode } from 'vue';
+import { ref, isVNode } from 'vue';
 
 const props = defineProps({
   content: {

diff --git a/packages/web/src/components/Echarts-plus2.vue b/packages/web/src/components/Echarts-plus2.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { defineProps, ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import * as echarts from 'echarts';
 
 const props = defineProps({

diff --git a/packages/web/src/components/FilterInput.vue b/packages/web/src/components/FilterInput.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-import { defineProps, ref, computed, defineEmits } from 'vue';
+import { ref, computed } from 'vue';
 import { ElMessage } from 'element-plus';
 import { omit } from 'lodash';
 

diff --git a/packages/web/src/components/FormPlus/FormGroup.vue b/packages/web/src/components/FormPlus/FormGroup.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+
 import { InfoFilled } from '@element-plus/icons-vue';
 const props = defineProps({
   component: String,

diff --git a/packages/web/src/components/FormPlus/FormRender.vue b/packages/web/src/components/FormPlus/FormRender.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, computed } from 'vue';
+import { computed } from 'vue';
 import FormItem from './FormItem.vue';
 import FormGroup from './FormGroup.vue';
 

diff --git a/packages/web/src/components/FormPlus/TableSelect/Pagination.vue b/packages/web/src/components/FormPlus/TableSelect/Pagination.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="jsx">
-import { defineProps, inject } from 'vue';
+import { inject } from 'vue';
 
 const props = defineProps({
   total: {

diff --git a/packages/web/src/components/FormPlus/TableSelect/Toolbar.vue b/packages/web/src/components/FormPlus/TableSelect/Toolbar.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="jsx">
-import { defineProps, inject, computed, defineEmits } from 'vue';
+import { inject, computed } from 'vue';
 import { Refresh, CaretBottom } from '@element-plus/icons-vue';
 import { renderProps } from '@/utils';
 

diff --git a/packages/web/src/components/FormPlus/elements/Upload.vue b/packages/web/src/components/FormPlus/elements/Upload.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, computed, watchEffect, ref } from 'vue';
+import { computed, watchEffect, ref } from 'vue';
 import { UploadFilled } from '@element-plus/icons-vue';
 
 const props = defineProps({

diff --git a/packages/web/src/components/FormPlusDrawer.vue b/packages/web/src/components/FormPlusDrawer.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 const formPlusRef = ref(null);
 

diff --git a/packages/web/src/components/Iframe.vue b/packages/web/src/components/Iframe.vue
@@ -12,7 +12,7 @@
   </template>
 
   <script setup>
-  import { onMounted, computed, toRefs, defineProps } from 'vue';
+  import { onMounted, computed, toRefs } from 'vue';
   import iframeResize from "iframe-resizer/js/iframeResizer"
 
   const props = defineProps({

diff --git a/packages/web/src/components/InfoPreview.vue b/packages/web/src/components/InfoPreview.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="jsx">
-import { defineProps, isVNode } from 'vue';
+import { isVNode } from 'vue';
 
 defineProps({
   data: Object,

diff --git a/packages/web/src/components/ItemGroup.vue b/packages/web/src/components/ItemGroup.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="jsx">
-import { defineProps, computed, defineEmits } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   labelWidth: String,

diff --git a/packages/web/src/components/ListHeader.vue b/packages/web/src/components/ListHeader.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 const props = defineProps({

diff --git a/packages/web/src/components/NumberInput.vue b/packages/web/src/components/NumberInput.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, computed, watchEffect } from 'vue';
+import { computed, watchEffect } from 'vue';
 
 const props = defineProps({
   modelValue: Number,

diff --git a/packages/web/src/components/ResourceName.vue b/packages/web/src/components/ResourceName.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="jsx">
-import { defineProps } from 'vue';
+
 
 const props = defineProps({
   name: String,

diff --git a/packages/web/src/components/SliderPlus.vue b/packages/web/src/components/SliderPlus.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue';
+import { ref } from 'vue';
 
 const value = ref(0)
 

diff --git a/packages/web/src/components/SvgIcon/index.vue b/packages/web/src/components/SvgIcon/index.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { isExternal as external } from '@/utils/validate';
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 const props = defineProps({
   // icon 图标
   icon: {

diff --git a/packages/web/src/components/TablePlus/Pagination.vue b/packages/web/src/components/TablePlus/Pagination.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="jsx">
-import { defineProps, inject } from 'vue';
+import { inject } from 'vue';
 
 const props = defineProps({
   total: {

diff --git a/packages/web/src/components/TablePlus/SearchTag.vue b/packages/web/src/components/TablePlus/SearchTag.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="jsx">
-import { computed, defineProps, isVNode } from 'vue';
+import { computed, isVNode } from 'vue';
 import { isArray } from 'lodash';
 import { ElPopover, ElTag } from 'element-plus';