ChrisGray0626 · ChrisGray0626 · Jul 16, 2024 · May 14, 2024 · May 15, 2024 · May 16, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,45 @@
+name: Build and Push Docker Image
+on:
+  push:
+    branches:
+      - dev/*
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.x ]
+        image-name: [ chrisgray0626/gis-agent-frontend ]
+        image-tag: [ 0.1 ]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - run: yarn install
+      - run: yarn build
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ matrix.image-name }}:latest, ${{ matrix.image-name }}:${{ matrix.image-tag }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/.gitignore b/.gitignore
@@ -20,3 +20,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Nginx
+nginx/log
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,5 @@
+FROM nginx:stable
+# Copy the configuration of Nginx
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
+# COPY the source code
+COPY dist/ /usr/share/nginx/html/
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
-# Vue 3 + TypeScript + Vite
+# Agent-Web
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## 功能设计
 
-## Recommended Setup
+https://dde.feishu.cn/wiki/TlxpwBmUIipdZ1kmfgjcEfK6nYB
 
-- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+## 接口文档
 
-- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
+https://app.apifox.com/project/4714372
diff --git a/compose.yaml b/compose.yaml
@@ -0,0 +1,7 @@
+services:
+  frontend:
+    image: chrisgray0626/gis-agent-frontend:latest
+    volumes:
+      - ./nginx/log:/var/log/nginx
+    ports:
+      - 8888:80
diff --git a/index.html b/index.html
@@ -1,10 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Agent-Web</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/nginx/default.conf b/nginx/default.conf
@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    server_name localhost;
+    #charset koi8-r;
+    access_log  /var/log/nginx/host.access.log  main;
+    error_log  /var/log/nginx/error.log  error;
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+    }
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}
diff --git a/package.json b/package.json
@@ -9,9 +9,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.21"
+    "@antv/g6": "^4.8.24",
+    "@antv/layout": "^0.3.25",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@logicflow/core": "^1.2.27",
+    "@logicflow/extension": "^1.2.27",
+    "axios": "^1.7.2",
+    "element-plus": "^2.7.3",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21",
+    "vue-router": "4"
   },
   "devDependencies": {
+    "@types/node": "^20.12.12",
     "@vitejs/plugin-vue": "^5.0.4",
     "less": "^4.2.0",
     "typescript": "^5.2.2",

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/script/build.sh b/script/build.sh
@@ -0,0 +1,11 @@
+#!/bin/bash
+
+REGISTRY_URL=chrisgray0626
+IMAGE_NAME=gis-agent-frontend
+IMAGE_TAG=0.1
+# Change to the root directory
+cd ..
+# Build the image
+docker build -t ${REGISTRY_URL}/${IMAGE_NAME}:latest .
+# Tag the image
+docker tag ${REGISTRY_URL}/${IMAGE_NAME}:latest ${REGISTRY_URL}/${IMAGE_NAME}:${IMAGE_TAG}
diff --git a/script/run.sh b/script/run.sh
@@ -0,0 +1 @@
+npm run dev
diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,5 @@
-<script lang="ts" setup>
-import Index from '/src/views/index/index.vue'
-</script>
+<script lang="ts" setup></script>
 
 <template>
-  <Index/>
+  <RouterView />
 </template>
-
diff --git a/src/G6/behaviorConfig.ts b/src/G6/behaviorConfig.ts
@@ -0,0 +1,22 @@
+import { IG6GraphEvent } from "@antv/g6-core/lib/types";
+import { BehaviorOption } from "@antv/g6";
+import { useTaskStore } from "@/store/task.ts";
+import pinia from "@/store";
+import { Task } from "@/type.ts";
+
+export const activateNodeBehavior: BehaviorOption = {
+  getEvents() {
+    return {
+      "node:click": "onNodeClick",
+    };
+  },
+  async onNodeClick(evt: IG6GraphEvent) {
+    const node = evt.item!;
+    const task: Task = node.getModel().task as Task;
+    // Update the task config
+    const taskStore = useTaskStore(pinia);
+    await taskStore.updateData(task);
+    // Show the task config
+    taskStore.show();
+  },
+};
diff --git a/src/G6/edgeConfig.ts b/src/G6/edgeConfig.ts
@@ -0,0 +1,48 @@
+import G6, { ShapeOptions } from "@antv/g6";
+
+export const indentedEdge: ShapeOptions = {
+  afterDraw(_cfg, group) {
+    const shape = group?.get("children")[0];
+    shape.attr("stroke", "#656565");
+    shape.attr("radius", "16");
+    shape.attr("lineWidth", "2");
+  },
+  getControlPoints: (cfg) => {
+    const startPoint = cfg.startPoint;
+    const endPoint = cfg.endPoint;
+    return [
+      startPoint!,
+      {
+        x: startPoint!.x,
+        y: endPoint!.y,
+      },
+      endPoint!,
+    ];
+  },
+};
+export const workflowEdge: ShapeOptions = {
+  draw(cfg, group) {
+    const { startPoint, endPoint } = cfg;
+    const r = 3;
+    const lineWidth = 2;
+    const keyShape = group.addShape("path", {
+      attrs: {
+        path: [
+          ["M", startPoint!.x, startPoint!.y + (r + lineWidth / 2)],
+          ["L", endPoint!.x, endPoint!.y + (r + lineWidth / 2)],
+        ],
+        // radius: 10,
+        stroke: "#5A77C1",
+        lineWidth,
+        endArrow: {
+          path: G6.Arrow.circle(r), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
+          // d: 25,
+          fill: "#5A77C1",
+        },
+      },
+      name: "workflow-edge-path-shape",
+    });
+    group.toFront();
+    return keyShape;
+  },
+};
diff --git a/src/G6/index.ts b/src/G6/index.ts
@@ -0,0 +1,23 @@
+import G6 from "@antv/g6";
+import {
+  breakdownNode as breakdownNodeConfig,
+  workflowNode as workflowNodeConfig,
+} from "@/G6/nodeConfig.ts";
+import {
+  indentedEdge as indentedEdgeConfig,
+  workflowEdge as workflowEdgeConfig,
+} from "@/G6/edgeConfig.ts";
+import { activateNodeBehavior as activateNodeBehaviorConfig } from "@/G6/behaviorConfig.ts";
+
+export function G6Register() {
+  // node registration
+  // G6.registerNode("rootNode", rootNodeConfig, "rect");
+  // G6.registerNode("treeNode", treeNodeConfig);
+  G6.registerNode("breakdownNode", breakdownNodeConfig);
+  G6.registerNode("workflowNode", workflowNodeConfig);
+  // edge registration
+  G6.registerEdge("indentedEdge", indentedEdgeConfig, "polyline");
+  G6.registerEdge("workflowEdge", workflowEdgeConfig);
+  // behavior registration
+  G6.registerBehavior("activate-node", activateNodeBehaviorConfig);
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,3 +20,6 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    # Nginx
+    nginx/log