数据展示页面 修复了背景色溢出的问题 (#59)

.github/workflows/cd.yml

@@ -1,14 +1,16 @@
 name: CD
+
 on:
-  # 以主干的push事件作为触发条件
   push:
-    branches: main
+    branches:
+      - main
+      - dev
 
 jobs:
-  CD:
+  deploy-main:
+    if: github.ref == 'refs/heads/main'
     runs-on: ubuntu-latest
     steps:
-
       - name: Checkout repository
         uses: actions/checkout@v2
 
@@ -32,37 +34,29 @@ jobs:
         if: steps.cache-dependencies.outputs.cache-hit != 'true'
         run: pnpm install
 
-      # 从 package.json 里获取 version 属性的值
-      # 在 CD Workflow 中会给每个生成的制品打上标签，而标签取值于 version 值
       - name: Read Version
-        # 读取出来的值会放在 steps.[id].outputs.value 供其他步骤 step 读取
         id: version
         uses: ashley-taylor/[email protected]
         with:
           path: ./package.json
           property: version
 
-      # 打包生成制品，且把制品压缩到 assets.zip 压缩包里
       - name: Building
         run: |
           pnpm build-only
           zip -r assets ./dist/**
 
-      # 基于当前 commit 进行版本发布 (Create a release)，tag_name 是 v 前缀加上 package.json 的 version 值
       - name: Create GitHub Release
-        # 此步骤中，版本发布后会返回对应的 url，以供下面上传制品的步骤中读取使用
         id: create_release
         uses: actions/create-release@v1
         env:
-          # GITHUB_TOKEN 是准备工作步骤三申请的 Personal Access Token
           GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         with:
           tag_name: v${{ steps.version.outputs.value }}
           release_name: v${{ steps.version.outputs.value }}
           draft: false
           prerelease: false
 
-      # 把 assets.zip 上传到仓库对应的发布版本 Release 上
       - name: Update Release Asset
         id: upload-release-asset
         uses: actions/upload-release-asset@v1
@@ -74,19 +68,55 @@ jobs:
           asset_name: assets.zip
           asset_content_type: application/zip
 
+      - name: Upload to Deploy Server (Main)
+        uses: easingthemes/[email protected]
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_TOKEN_MAIN }}
+          SOURCE: "dist/"
+          TARGET: "/www/jh-questionnaire"
+          ARGS: "-avzr --delete"
+          REMOTE_HOST: ${{ secrets.REMOTE_HOST_MAIN }}
+          REMOTE_USER: ${{ secrets.REMOTE_USER_MAIN }}
+          PORT: "10022"
+
+  deploy-dev:
+    if: github.ref == 'refs/heads/dev'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Cache
+        id: cache-dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.OS }}-${{ hashFiles('**/pnpm-lock.yaml') }}
 
-      - name: Upload to Deploy Server
+      - name: Installing Dependencies
+        if: steps.cache-dependencies.outputs.cache-hit != 'true'
+        run: pnpm install
+
+      - name: Building
+        run: |
+          pnpm build-only
+          zip -r assets ./dist/**
+
+      - name: Upload to Deploy Server (Dev)
         uses: easingthemes/[email protected]
         env:
-          # SSH_PRIVATE_KEY 为准备工作步骤三中生成密钥对里的私钥
-          SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_TOKEN }}
-          # 指定当前目录中要上传的内容
+          SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_TOKEN_DEV }}
           SOURCE: "dist/"
-          # 指定上传到部署机器的目录
-          TARGET: "/var/www/dist"
-          # 上传前指令，此处用c于清空 TARGET 下的文件
+          TARGET: "/home/github-action-xsx/front"
           ARGS: "-avzr --delete"
-          # REMOTE_HOST 为机器的公网IP
-          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
-          # REMOTE_USER 为登录机器时用到的账号名
-          REMOTE_USER: ${{ secrets.REMOTE_USER }}
+          REMOTE_HOST: ${{ secrets.REMOTE_HOST_DEV }}
+          REMOTE_USER: ${{ secrets.REMOTE_USER_DEV }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-ci",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "private": true,
   "type": "module",
   "scripts": {

src/pages/DataDisplay/statics.vue

@@ -5,9 +5,9 @@
         <div class="font-bold">{{ obj.serial_num }}. {{ obj.question }}</div>
         <div v-for="opt in obj.options" class="m-6">
           <div class="relative border rounded">
+            <div class="inline absolute left-0 rounded bg-cyan-400 h-full opacity-15" :style="{width: 100*opt.count/totalNum+'%'}"></div>
             <span class="ml-4">{{ opt.content }}</span>
             <span class="absolute right-4">{{ (opt.count/totalNum*100).toFixed(2) }}%</span>
-            <div class="inline absolute left-0 rounded bg-cyan-400 h-full opacity-15" :style="{width: 100*opt.count/totalNum+'%'}"></div>
           </div>
         </div>
       </n-card>