feat: save

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+**/node_modules
+**/*/node_modules

docker-compose.yml

@@ -8,5 +8,17 @@ services:
       DB_USER: "gemer"
       DB_DATABASE: "helper_center"
       REDIS_URL: "redis://192.168.10.82:63790"
+    networks:
+      - backend
     ports:
       - "8085:8085"
+  frontend:
+    image: gemer/helper_frontend:latest
+    ports:
+      - "8080:80"
+    networks:
+      - backend
+
+networks:
+  backend:
+    driver: bridge

docker/frontend/Dockerfile

@@ -0,0 +1,29 @@
+# 使用 Node 镜像构建 Vue 项目
+FROM node:20-alpine AS build-stage
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制项目文件
+COPY . .
+RUN npm install -g pnpm
+RUN pnpm config set registry https://registry.npmmirror.com
+RUN cd ${WORKDIR}
+RUN pnpm install
+# 构建生产环境静态文件
+RUN pnpm run build-backend-html
+# RUN  pnpm run build-web
+# 使用 Nginx 镜像作为运行时
+FROM nginx:alpine
+
+# 复制 Nginx 配置文件
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+
+# 从构建阶段复制静态文件到 Nginx 的默认静态文件目录
+COPY --from=build-stage /app/packages/frontend/dist /usr/share/nginx/html/admin
+
+# 暴露 80 端口
+EXPOSE 80
+
+# 启动 Nginx
+CMD ["nginx", "-g", "daemon off;"]

nginx/nginx.conf

@@ -0,0 +1,80 @@
+server {
+    #服務部屬上Container用的是哪個Port
+    listen       80;
+    server_name  localhost;
+
+    client_max_body_size        100m;
+    client_body_buffer_size     128k;
+    proxy_connect_timeout       5;
+    proxy_send_timeout          1800;
+    proxy_read_timeout          1800;
+    proxy_buffer_size           4k;
+    proxy_buffers               4 32k;
+    proxy_busy_buffers_size     64k;
+    proxy_temp_file_write_size  64k;
+    auth_basic "status";
+    #開啟gzip
+    gzip  on;
+    #低於1kb的資源不壓縮
+    gzip_min_length 1k;
+    #壓縮級別1-9，越大壓縮率越高，同時消耗cpu資源也越多，建議設置在5左右。
+    gzip_comp_level 5;
+    #需要壓縮哪些response類型的資源，用空格隔開。不建議壓縮圖片.
+    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
+    #配置禁用gzip條件，支持正規表達式。此處表示ie6及以下不啟用gzip
+    gzip_disable "MSIE [1-6]\.";
+    #是否添加"Vary: Accept-Encoding" response header
+    gzip_vary on;
+
+    #location / 是指當從外部訪問這個服務的時候，他需要帶什麼路徑 (這邊寫是localhost:7777/)
+    #如果希望是訪問的網址是 localhost:7777/myWeb 就寫成location /myWeb
+    # location /admin {
+    #     root   /usr/share/nginx/html/admin;
+    #     index  index.html index.htm;
+    #     try_files $uri $uri/ /index.html; 
+    # }
+  
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html; 
+    }
+
+       # 二级目录配置（/subdir）
+    location /admin {
+        alias /usr/share/nginx/html/admin; # 子应用的静态文件目录
+        index index.html;
+        try_files $uri $uri/ /admin/index.html;
+    }
+
+    # # 防止二级目录下的静态资源被错误处理
+    location /admin/ {
+        alias /usr/share/nginx/html/admin/;
+        try_files $uri $uri/ =404;
+    }
+    
+#  # 配置静态资源缓存
+#     location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+#         expires 1y;
+#         add_header Cache-Control "public";
+#     }
+
+       # 代理 API 请求到后端服务
+    location /api/ {
+        proxy_pass http://backend:8085/; # 后端 API 地址
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # 如果需要支持 WebSocket，添加以下配置
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+    }
+  
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build-backend": "pnpm --filter @4dkankan/helperbackend run build",
     "build-backend-html": "pnpm --filter @4dkankan/helperfrontend run build",
-    "build-web": "pnpm --filter @4dkankan/helperweb run build"
+    "build-web": "pnpm --filter @4dkankan/helperweb run build-only"
   },
   "author": "gemercheung@gmail.com",
   "license": "ISC"

packages/frontend/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+**/node_modules
+**/*/node_modules

packages/frontend/.env

@@ -1,2 +1,3 @@
 VITE_TITLE = 'TESTING'
 VITE_LANGS=zh,en
+

packages/frontend/.env.development

@@ -2,7 +2,7 @@
 VITE_USE_HASH = 'true'
 
 # 资源公共路径,需要以 /开头和结尾
-VITE_PUBLIC_PATH = '/'
+VITE_PUBLIC_PATH = '/admin/'
 
 # Axios 基础路径
 VITE_AXIOS_BASE_URL = '/api'  # 用于代理

packages/frontend/.env.production

@@ -2,7 +2,7 @@
 VITE_USE_HASH = 'false'
 
 # 资源公共路径,需要以 /开头和结尾
-VITE_PUBLIC_PATH = '/'
+VITE_PUBLIC_PATH = '/admin/'
 
 VITE_AXIOS_BASE_URL = '/api'  # 用于代理
 

packages/frontend/Dockerfile

@@ -0,0 +1,28 @@
+# 使用 Node 镜像构建 Vue 项目
+FROM node:20-alpine AS build-stage
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制项目文件
+COPY ../../../ .
+RUN npm install -g pnpm
+RUN cd ${WORKDIR}
+RUN  pnpm install
+# 构建生产环境静态文件
+RUN build-backend-html
+RUN build-web
+# 使用 Nginx 镜像作为运行时
+FROM nginx:alpine
+
+# 复制 Nginx 配置文件
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+
+# 从构建阶段复制静态文件到 Nginx 的默认静态文件目录
+COPY --from=build-stage /app/dist /usr/share/nginx/html/admin
+
+# 暴露 80 端口
+EXPOSE 80
+
+# 启动 Nginx
+CMD ["nginx", "-g", "daemon off;"]

packages/frontend/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build --mode production",
     "preview": "vite preview",
     "lint:fix": "eslint --fix",
     "postinstall": "npx simple-git-hooks",

packages/web/README.md

@@ -1,87 +0,0 @@
-<p align="center">
-  <a href="https://github.com/FjellOverflow/vue3-starter">
-    <img alt="logo" src="./public/favicon.svg" height="64">
-  </a>
-</p>
-
-<h1 align="center">
-  <a href="https://github.com/FjellOverflow/vue3-starter">vue3-starter</a>
-</h1>
-
-<p align="center">
-  A minimal template for new Vue3 projects
-</p>
-
-<p align="center">
-  <img src="https://img.shields.io/github/package-json/v/FjellOverflow/vue3-starter?label=Version&color=success"/>
-  &ensp;
-  <img src="https://img.shields.io/github/license/FjellOverflow/vue3-starter?label=License&color=success"/>
-  &ensp;
-  <img src="https://img.shields.io/github/actions/workflow/status/FjellOverflow/vue3-starter/ci.yaml?branch=main&label=CI"/>
-</p>
-
-<p align="center">
-  <a href="#features">Features</a> |
-  <a href="#installation">Installation</a> |
-  <a href="#development">Development</a> |
-  <a href="#production">Production</a> |
-  <a href="#continuous-integration">Continuous Integration</a>
-</p>
-
-## Features
-
-- 🪧 File-based routing ([vue-router](https://github.com/vuejs/router), [plugin](https://github.com/posva/unplugin-vue-router))
-- 🖼️ Page layouts ([plugin](https://github.com/johncampionjr/vite-plugin-vue-layouts))
-- 🌎 Internationalization ([vue-i18n](https://github.com/intlify/vue-i18n))
-- 🔄 Auto imports ([plugin](https://github.com/unplugin/unplugin-auto-import), [plugin](https://github.com/unplugin/unplugin-vue-components))
-- ⚡ Unit tests ([vitest](https://github.com/vitest-dev/vitest))
-- 🧪 e2e tests ([cypress](https://github.com/cypress-io/cypress))
-- ✨ TypeScript, ESLint & Prettier
-
-## Installation
-
-The template runs in [bun](https://bun.sh/), a NodeJS compatible JavaScript environment.
-
-```sh
-git clone https://github.com/FjellOverflow/vue3-starter.git
-cd vue3-starter
-bun install
-```
-
-To install the recommended extensions for VSCode, open the _Extensions_ tab and type `@recommended`.
-
-## Development
-
-To start the dev-server run `bun run dev`. All commands are called with `bun run <command>`, the most common ones are:
-
-- `dev`: start dev server
-- `build`: build project
-- `test:unit`: run unit tests
-- `test:e2e:dev`: interactive e2e tests
-
-For a full list of all commands, check the `scripts` section in `package.json`.
-
-> [!WARNING]  
-> While the scripts can also be run with just `bun <script>`, the `build` commands needs to be run with `bun run build`, as `bun build` will instead use bun's built-in builder, instead of Vite.
-
-## Production
-
-To build the project for production, use
-
-```sh
-bun install --production --frozen-lockfile
-bun run build-only
-```
-
-To build a Docker image with the provided Dockerfile, use
-
-```sh
-docker build -t vue3-starter .
-docker run -p 80:80 vue3-starter
-```
-
-which will start an nginx container that serves the application at [localhost:80](http://localhost:80)
-
-## Continuous Integration
-
-A CI pipeline for Github is configured in `.github/workflows/ci.yaml`. When changes are pushed to Github, a Github action will run `typecheck`, `lint` as well as `test:unit` and `test:e2e`. On any errors, the pipeline fails.

packages/web/cypress.config.ts

@@ -1,8 +0,0 @@
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
-  e2e: {
-    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,ts}',
-    baseUrl: 'http://localhost:4173',
-  },
-})

packages/web/cypress/e2e/HelloWorld.cy.ts

@@ -1,19 +0,0 @@
-describe('Hello World', () => {
-  it('changes language', () => {
-    cy.visit('/')
-
-    cy.contains('Hello, world!')
-
-    cy.get('button').click()
-
-    cy.contains('Tere, maailm!')
-
-    cy.get('button').click()
-
-    cy.contains('Hallo, verden!')
-
-    cy.get('button').click()
-
-    cy.contains('Hallo, Welt!')
-  })
-})

packages/web/cypress/support/commands.ts

@@ -1,37 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }

packages/web/cypress/support/e2e.ts

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/e2e.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

packages/web/cypress/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["./e2e/**/*", "./support/**/*"],
-  "exclude": ["./support/component.*"],
-  "compilerOptions": {
-    "isolatedModules": false,
-    "types": ["cypress"]
-  }
-}

packages/web/eslint.config.js

@@ -1,7 +1,6 @@
 import pluginVue from 'eslint-plugin-vue'
 import vueTsEslintConfig from '@vue/eslint-config-typescript'
 import pluginVitest from '@vitest/eslint-plugin'
-import pluginCypress from 'eslint-plugin-cypress/flat'
 import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 
 export default [
@@ -27,10 +26,5 @@ export default [
     ...pluginVitest.configs.recommended,
     files: ['src/**/__tests__/*'],
   },
-
-  {
-    ...pluginCypress.configs.recommended,
-    files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/support/**/*.{js,ts,jsx,tsx}'],
-  },
   skipFormatting,
 ]

packages/web/package.json

@@ -15,8 +15,6 @@
     "build": "run-p typecheck \"build-only {@}\" --",
     "preview": "vite preview",
     "test:unit": "vitest",
-    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
-    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
     "build-only": "vite build",
     "typecheck": "vue-tsc --build --force",
     "lint": "eslint . --fix",
@@ -45,9 +43,7 @@
     "@vue/eslint-config-typescript": "^14.2.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "cypress": "^13.17.0",
     "eslint": "^9.17.0",
-    "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-vue": "^9.32.0",
     "jsdom": "^25.0.1",
     "npm-run-all2": "^7.0.2",

packages/web/tsconfig.node.json

@@ -1,6 +1,6 @@
 {
   "extends": "@tsconfig/node22/tsconfig.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "include": ["vite.config.*", "vitest.config.*"],
   "compilerOptions": {
     "composite": true,
     "noEmit": true,