feat: 测试提交3

.dockerignore

@@ -1,41 +0,0 @@
-### Java template
-# Compiled class file
-*.class
-# Log file
-*.log
-# BlueJ files
-*.ctxt
-# Mobile Tools for Java (J2ME)
-.mtj.tmp/
-# Package Files #
-*.jar
-*.war
-*.nar
-*.ear
-*.zip
-*.tar.gz
-*.rar
-# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
-hs_err_pid*
-### Maven template
-target/
-pom.xml.tag
-pom.xml.releaseBackup
-pom.xml.versionsBackup
-pom.xml.next
-release.properties
-dependency-reduced-pom.xml
-buildNumber.properties
-.mvn/timing.properties
-# https://github.com/takari/maven-wrapper#usage-without-binary-jar
-.mvn/wrapper/maven-wrapper.jar
-### Example user template template
-### Example user template
-# IntelliJ project files
-.idea
-*.iml
-out
-gen
-!build
-!default.conf
-!nginx.conf

.drone.yml

@@ -1,107 +0,0 @@
-kind: pipeline
-type: docker
-name: fateverse-react
-steps:
-  - name: build-package
-    image: registry.cn-chengdu.aliyuncs.com/claywang/node:16.20.0
-    volumes:
-      - name: cache
-        path: /drone/src/node_modules
-      - name: build
-        path: /app/build
-    commands:
-      - export CI=false
-      - mkdir -p /app/build/$DRONE_REPO_NAME
-      - rm -rf /app/build/$DRONE_REPO_NAME/*
-      - cp deployment.yml /app/build/$DRONE_REPO_NAME/
-      - cp Dockerfile /app/build/$DRONE_REPO_NAME/
-      - cp .dockerignore /app/build/$DRONE_REPO_NAME/
-      - cp default.conf /app/build/$DRONE_REPO_NAME/
-      - cp docker.sh /app/build/$DRONE_REPO_NAME/
-      - cp nginx.conf /app/build/$DRONE_REPO_NAME/
-      - npm -v
-      - mkdir -p ./node_modules
-      - export NODE_MODULES_PATH=`pwd`/node_modules
-      - npm config set registry https://registry.npm.taobao.org
-      - set NODE_OPTIONS=--openssl-legacy-provider
-      - npm install
-      - npm run build
-      - ls /app/build/$DRONE_REPO_NAME/
-      - echo $NODE_MODULES_PATH
-      - cp -r dist /app/build/$DRONE_REPO_NAME
-
-
-
-  - name: build-docker # 制作docker镜像
-    image: docker # 使用官方docker镜像
-    volumes: # 将容器内目录挂载到宿主机
-      - name: build
-        path: /app/build
-      - name: docker
-        path: /var/run/docker.sock # 挂载宿主机的docker
-      - name: config
-        path: /config
-    environment: # 获取到密文的docker用户名和密码
-      DOCKER_USERNAME:
-        from_secret: docker_username
-      DOCKER_PASSWORD:
-        from_secret: docker_password
-      REGISTRY:
-        from_secret: registry
-      REGISTRY_NAMESPACE:
-        from_secret: registry_namespace
-    commands: # 定义在Docker容器中执行的shell命令
-      - cd /app/build/$DRONE_REPO_NAME/
-      - cat Dockerfile
-      - sed -i 's/$REGISTRY/'"$REGISTRY"'/' deployment.yml
-      - sed -i 's/$REGISTRY_NAMESPACE/'"$REGISTRY_NAMESPACE"'/' deployment.yml
-      - sed -i 's/$DRONE_REPO_NAME/'"$DRONE_REPO_NAME"'/' deployment.yml
-      - sed -i 's/$DRONE_COMMIT/'"$DRONE_COMMIT"'/' deployment.yml
-      #      - sed -i 's/$DRONE_COMMIT/'"$DRONE_COMMIT"'/' docker.sh
-      #      - sed -i 's/$DRONE_REPO_NAME/'"$DRONE_REPO_NAME"'/' docker.sh
-      # docker登录,不能在脚本中登录,并且不能使用docker login -u -p
-      - echo $DOCKER_PASSWORD | docker login $REGISTRY --username $DOCKER_USERNAME --password-stdin
-      - chmod +x docker.sh
-      - cat docker.sh
-      - sh docker.sh
-      # 执行完脚本删除本次制作的docker镜像,避免多次后当前runner空间不足
-      - docker rmi -f $(docker images | grep $DRONE_REPO_NAME | awk '{print $3}')
-
-
-  - name: drone-rancher # rancher运行
-    image: registry.cn-chengdu.aliyuncs.com/claywang/kubectl #阿里云的kubectl镜像,里面包含kubectl命令行工具
-    volumes: # 将容器内目录挂载到宿主机
-      - name: build
-        path: /app/build # 将应用打包好的Jar和执行脚本挂载出来
-      - name: config
-        path: /app/config # 将kubectl 配置文件挂载出来
-    commands: # 定义在Docker容器中执行的shell命令
-      - cd /app/build/$DRONE_REPO_NAME/
-      # 将deployment中定义的变量替换为drone中的内置变量
-      - cat deployment.yml
-      # 通过kubectl指令运行deployment.yml,并指定授权文件kubectl_conf.yml
-      # - kubectl apply -f deployment.yml -n $DRONE_COMMIT_BRANCH --kubeconfig=/app/config/kubectl_conf.yml
-      - kubectl apply -f deployment.yml -n dev --kubeconfig=/app/config/hcy-text-kubectl.yml
-
-volumes:
-  - name: build
-    host:
-      path: /home/build
-  - name: cache
-    host:
-      path: /home/npm/cache
-  - name: config # k8s对接的配置文件
-    host:
-      path: /home/kubect
-  - name: maven-cache # maven的缓存文件
-    host:
-      path: /home/data/maven/cache
-  - name: docker # 宿主机中的docker
-    host:
-      path: /var/run/docker.sock
-
-trigger:
-  branch:
-    - prod
-  event:
-    - push

.eslintrc.cjs

@@ -2,17 +2,20 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
+    "eslint:recommended",
-    'plugin:@typescript-eslint/recommended',
+    "plugin:@typescript-eslint/recommended",
-    'plugin:react-hooks/recommended',
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
-  plugins: ['react-refresh'],
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
+    "react-refresh/only-export-components": [
-      'warn',
+      "warn",
       { allowConstantExport: true },
     ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "prefer-const": "off",
+    "@typescript-eslint/no-unused-vars": "off",
   },
-}
+};

Dockerfile

@@ -1,9 +0,0 @@
-FROM nginx
-RUN rm -rf /etc/nginx/nginx.conf
-COPY nginx.conf /etc/nginx/
-#RUN useradd -b /home/clay -m -s /bin/bash clay
-#RUN chmod a+xr -R /home/clay && chown clay:clay -R /home/clay
-#USER clay
-COPY ./dist /home/clay
-WORKDIR /home/clay
-EXPOSE 80

deployment.yml

@@ -1,49 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: $DRONE_REPO_NAME
-spec:
-  type: ClusterIP
-  ports:
-    - protocol: TCP
-      port: 80
-      targetPort: 80
-  selector:
-    app: $DRONE_REPO_NAME
-
----
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: $DRONE_REPO_NAME
-spec:
-  replicas: 1
-  selector:
-    matchLabels:
-      app: $DRONE_REPO_NAME
-  template:
-    metadata:
-      labels:
-        app: $DRONE_REPO_NAME
-    spec:
-      imagePullSecrets:
-        - name: harbor
-      containers:
-        - image: $REGISTRY/$REGISTRY_NAMESPACE/$DRONE_REPO_NAME:$DRONE_COMMIT
-          name: $DRONE_REPO_NAME
-          imagePullPolicy: Always
-          env:
-            - name: TIME_ZONE
-              value: Asia/Shanghai
-            - name: REF_NAME
-              value: dev
-          resources:
-            requests:
-              memory: 0.1Gi
-              cpu: 0.1
-            limits:
-              memory: 2Gi
-              cpu: 2
-          ports:
-            - containerPort: 8080
-              name: app-port

docker.sh

@@ -1,15 +0,0 @@
-#!/bin/sh
-# 定义应用组名
-group_name='clay'
-# 定义应用名称
-app_name=$DRONE_REPO_NAME
-# 定义应用版本
-app_version=$DRONE_COMMIT
-echo ${app_version}
-# 打包编译docker镜像
-echo '----build image start----'
-docker build -t ${group_name}/${app_name} .
-echo '----build image success----'
-docker tag ${group_name}/${app_name} $REGISTRY/$REGISTRY_NAMESPACE/${app_name}:${app_version}
-docker push $REGISTRY/$REGISTRY_NAMESPACE/${app_name}:${app_version}
-echo 'push success'

nginx.conf

@@ -1,50 +0,0 @@
-user  nginx;
-worker_processes  auto;
-
-error_log  /var/log/nginx/error.log notice;
-pid        /var/run/nginx.pid;
-
-
-events {
-    worker_connections  1024;
-}
-http {
-    include       /etc/nginx/mime.types;
-    default_type  application/octet-stream;
-    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
-                      '$status $body_bytes_sent "$http_referer" '
-                      '"$http_user_agent" "$http_x_forwarded_for"';
-
-     add_header 'Access-Control-Allow-Origin' '*';
-     add_header 'Access-Control-Allow-Headers' '*';
-     add_header 'Access-Control-Allow-Methods' '*';
-
-    access_log  /var/log/nginx/access.log  main;
-
-    sendfile        on;
-
-    keepalive_timeout  65;
-
-    server {
-        listen       80;
-        listen  [::]:80;
-
-        location /api {
-          proxy_pass http://gateway.dev.svc.cluster.local:8080;
-          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-          proxy_set_header X-Forwarded-Proto $scheme;
-          proxy_set_header X-Forwarded-Port $server_port;
-          proxy_set_header Host $host;
-          rewrite "^/api/(.*)$" /$1 break;
-          proxy_http_version 1.1;
-          proxy_set_header Upgrade $http_upgrade;
-          proxy_set_header Connection 'upgrade';
-        }
-
-        location / {
-            root   /home/clay;
-            index  index.html index.htm;
-            try_files $uri $uri/ /index.html;
-        }
-}
-}

package.json

@@ -19,6 +19,7 @@
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-echarts-core": "^1.0.2",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "redux-persist": "^6.0.0",

src/view/custom-query/echarts-editor/index.tsx

@@ -0,0 +1,174 @@
+import { useState, useRef, useEffect } from "react";
+import "../index.scss";
+import { Button, Select } from "antd";
+// import type { EChartsOption } from "node_modules/react-echarts-core/lib/ChartCore";
+// import ChartCore from "node_modules/react-echarts-core/lib/ChartCore";
+import * as echarts from "echarts";
+export default function EchartsEditor() {
+  const echartRef: any = useRef(null);
+  const [xList, setXList] = useState<any[]>([]);
+  const [yList, setYList] = useState<any[]>([]);
+  const [currentDrag, setCurrentDrag] = useState<any>({});
+  const [dataList, setDataList] = useState<any[]>([
+    { id: 1, name: "Vue", state: "Value" },
+    { id: 2, name: "React", state: "Value" },
+    { id: 3, name: "Angular", state: "Key" },
+  ]);
+  const [echartOption, setEchartOption] = useState<object | any>({
+    xAxis: {
+      data: ["A", "B", "C", "D", "E"],
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: [1, 2, 3, 4, 5],
+        type: "line",
+      },
+    ],
+  });
+
+  const onDragStart: any = (item: any) => {
+    console.log(item.name, "开始拖拽");
+    setCurrentDrag(item);
+  };
+
+  const onDragEnd: any = (item: any) => {
+    console.log(item.name, "结束拖拽");
+  };
+
+  const onYDragOver: any = (e: any) => {
+    e.preventDefault();
+  };
+
+  const onXDrop: any = () => {
+    console.log("拖拽至X轴区域");
+    setXList(xList.concat(currentDrag));
+    let newDataList = handleDelDataList(currentDrag.id);
+    setDataList(newDataList);
+    setEchartOption({
+      ...echartOption,
+      xAxis: {
+        data: xList.map((item) => item.name),
+      },
+    });
+  };
+
+  const onXDragOver: any = (e: any) => {
+    e.preventDefault();
+  };
+
+  const onYDrop: any = () => {
+    console.log("拖拽至Y轴区域");
+    console.log("拖拽至Y轴区域");
+    console.log("拖拽至Y轴区域");
+    console.log("拖拽至Y轴区域");
+    setYList(yList.concat(currentDrag));
+    let newDataList = handleDelDataList(currentDrag.id);
+    setDataList(newDataList);
+  };
+
+  const handleDelDataList = (id: number) => {
+    let newDataList = dataList;
+    const curIndex = newDataList.findIndex((item) => item.id === id);
+    newDataList.splice(curIndex, 1);
+    return newDataList;
+  };
+
+  // const res = () => {
+  //   let res: any[] = [];
+  //   setXList(xList);
+  //   xList.forEach((item: any) => {
+  //     res.push(item.name);
+  //   });
+  //   setXEchartList(res);
+  //   console.log(xEchartList);
+  //   return xEchartList;
+  // };
+
+  useEffect(() => {
+    const myEchart: any = echarts.init(document.querySelector(".canvas"));
+    myEchart.setOption(echartOption);
+    console.log(echartOption);
+  }, [echartOption]);
+
+  return (
+    <>
+      <div className="controller">
+        <div className="data bg">
+          <Select
+            placeholder="折线图"
+            allowClear
+            style={{ width: 100 + "%" }}
+            options={[{ value: "折线图", label: "折线图" }]}
+          />
+          {dataList.map((item: any) => {
+            return (
+              <div
+                className="list-item"
+                key={item.id}
+                draggable={true}
+                onDragStart={() => onDragStart(item)}
+                onDragEnd={() => onDragEnd(item)}
+              >
+                {item.name}
+              </div>
+            );
+          })}
+        </div>
+
+        <div
+          className="index-x bg"
+          onDragOver={onXDragOver}
+          onDrop={() => onXDrop()}
+        >
+          <span>值轴/X轴</span>
+          {xList.map((item: any) => {
+            return (
+              <div
+                className="list-item"
+                key={item.id}
+                // draggable={true}
+                // onDragStart={() => onDragStart(item)}
+                // onDragEnd={() => onDragEnd(item)}
+              >
+                {item.name}
+              </div>
+            );
+          })}
+        </div>
+        <div
+          className="index-y bg"
+          onDragOver={onYDragOver}
+          onDrop={() => onYDrop()}
+        >
+          <span>值轴/y轴</span>
+          {yList.map((item: any) => {
+            return (
+              <div
+                className="list-item"
+                key={item.id}
+                // draggable={true}
+                // onDragStart={() => onDragStart(item)}
+                // onDragEnd={() => onDragEnd(item)}
+              >
+                {item.name}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className="center-edit">
+        <div></div>
+      </div>
+      <div className="center-edit">
+        <Button>保存</Button>
+        <Button>高级设置</Button>
+      </div>
+      <div className="canvas" ref={echartRef}>
+        {/* <ChartCore option={option}></ChartCore> */}
+      </div>
+    </>
+  );
+}

src/view/custom-query/index.scss

@@ -0,0 +1,38 @@
+.controller {
+  display: flex;
+  .bg {
+    text-align: left;
+    box-shadow: 1px 1px 3px 1px #ddd;
+    background-color: #fff;
+    height: 40vh;
+    padding: 10px;
+    margin: 5px;
+  }
+  .list-item {
+    width: 95%;
+    margin: 10px auto;
+    height: 50px;
+    padding: 10px;
+    font-size: 20px;
+    border: 1px solid #ddd;
+  }
+  .data {
+    flex: 25%;
+    padding: 10px;
+  }
+  .index-x {
+    flex: 40%;
+  }
+  .index-y {
+    flex: 40%;
+  }
+}
+
+.center-edit {
+  display: flex;
+}
+.canvas {
+  width: 800px;
+  height: 400px;
+  background-color: pink;
+}