~~

2 years ago · ceaf8f938a
34 changed files with 21622 additions and 0 deletions
--- a/src/src/main/resources/static/css/app.2cf79ad6.css
+++ b/src/src/main/resources/static/css/app.2cf79ad6.css
@ -0,0 +1 @@
+h3[data-v-b9167eee]{margin:40px 0 0}ul[data-v-b9167eee]{list-style-type:none;padding:0}li[data-v-b9167eee]{display:inline-block;margin:0 10px}a[data-v-b9167eee]{color:#42b983}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}
--- a/src/src/main/resources/static/favicon.ico
+++ b/src/src/main/resources/static/favicon.ico
--- a/src/src/main/resources/static/index.html
+++ b/src/src/main/resources/static/index.html
@ -0,0 +1 @@
+<!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"><link rel="icon" href="/favicon.ico"><title>vue3-demo</title><script defer="defer" src="/js/chunk-vendors.6436c453.js"></script><script defer="defer" src="/js/app.4f8eae67.js"></script><link href="/css/app.2cf79ad6.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but vue3-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
--- a/src/src/main/resources/static/js/app.4f8eae67.js
+++ b/src/src/main/resources/static/js/app.4f8eae67.js
--- a/src/src/main/resources/static/js/app.4f8eae67.js.map
+++ b/src/src/main/resources/static/js/app.4f8eae67.js.map
--- a/src/src/main/resources/static/js/chunk-vendors.6436c453.js
+++ b/src/src/main/resources/static/js/chunk-vendors.6436c453.js
--- a/src/src/main/resources/static/js/chunk-vendors.6436c453.js.map
+++ b/src/src/main/resources/static/js/chunk-vendors.6436c453.js.map
--- a/src/web/.gitignore
+++ b/src/web/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/src/web/README.md
+++ b/src/web/README.md
@ -0,0 +1,24 @@
+# vue3-demo
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/src/web/babel.config.js
+++ b/src/web/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/src/web/build.ps1
+++ b/src/web/build.ps1
@ -0,0 +1,2 @@
+npm run build
+Copy-Item -Path ".\dist\*" -Destination "..\src\main\resources\static" -Recurse -Force
--- a/src/web/jsconfig.json
+++ b/src/web/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/src/web/package-lock.json
+++ b/src/web/package-lock.json
--- a/src/web/package.json
+++ b/src/web/package.json
@ -0,0 +1,49 @@
+{
+  "name": "vue3-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "ant-design-vue": "^4.1.1",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {
+      "vue/multi-word-component-names" : "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
--- a/src/web/postcss.config.js
+++ b/src/web/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
+  }
--- a/src/web/public/favicon.ico
+++ b/src/web/public/favicon.ico
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@ -0,0 +1,17 @@
+<!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="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/web/src/App.vue
+++ b/src/web/src/App.vue
@ -0,0 +1,6 @@
+<template>
+  <page-main />
+</template>
+<script setup>
+import PageMain from './pages/main/Page.vue'
+</script>
--- a/src/web/src/assets/icon/bucket-empty.svg
+++ b/src/web/src/assets/icon/bucket-empty.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="138" height="192.99990844726562" viewBox="0 0 138 192.99990844726562"><g><path d="M0,64.9965L0,76.9347C0,77.6673,0.594084,78.2611,1.32692,78.2611C2.05976,78.2611,2.65385,78.855,2.65385,79.5876L2.65385,84.8934C2.65385,85.626,2.05976,86.2199,1.32692,86.2199C0.594084,86.2199,0,86.8138,0,87.5463L0,103.464C0,104.196,0.594084,104.79,1.32692,104.79C2.05976,104.79,2.65385,105.384,2.65385,106.117L2.65385,111.423C2.65385,112.155,2.05976,112.749,1.32692,112.749C0.594084,112.749,0,113.343,0,114.076L0,129.993C0,130.726,0.594084,131.32,1.32692,131.32C2.05976,131.32,2.65385,131.913,2.65385,132.646L2.65385,137.952C2.65385,138.684,2.05976,139.278,1.32692,139.278C0.594084,139.278,0,139.872,0,140.605L0,155.196C0,155.928,0.594084,156.522,1.32692,156.522C2.05976,156.522,2.65385,157.116,2.65385,157.849L2.65385,163.818C2.65385,164.55,2.05976,165.144,1.32692,165.144C0.594084,165.144,0,165.738,0,166.471L0,174.429C0,184.686,8.31717,193,18.5769,193L119.423,193C129.683,193,138,184.686,138,174.429L138,166.471C138,165.738,137.406,165.144,136.673,165.144C135.94,165.144,135.346,164.55,135.346,163.818L135.346,157.849C135.346,157.116,135.94,156.522,136.673,156.522C137.406,156.522,138,155.928,138,155.196L138,140.605C138,139.872,137.406,139.278,136.673,139.278C135.94,139.278,135.346,138.684,135.346,137.952L135.346,132.646C135.346,131.913,135.94,131.32,136.673,131.32C137.406,131.32,138,130.726,138,129.993L138,114.076C138,113.343,137.406,112.749,136.673,112.749C135.94,112.749,135.346,112.155,135.346,111.423L135.346,106.117C135.346,105.384,135.94,104.79,136.673,104.79C137.406,104.79,138,104.196,138,103.464L138,87.5463C138,86.8138,137.406,86.2199,136.673,86.2199C135.94,86.2199,135.346,85.626,135.346,84.8934L135.346,79.5876C135.346,78.855,135.94,78.2611,136.673,78.2611C137.406,78.2611,138,77.6673,138,76.9347L138,64.9965C138,64.2639,137.406,63.6701,136.673,63.6701C135.94,63.6701,135.346,63.0762,135.346,62.3436L135.346,57.0378C135.346,56.3052,135.94,55.7113,136.673,55.7113C137.406,55.7113,138,55.1174,138,54.3848L138,45.7629C138,35.5067,129.683,27.1924,119.423,27.1924L114.654,27.1924C112.741,27.1924,111.783,24.881,113.136,23.5292C117.161,19.5048,119.423,14.0467,119.423,8.3554L119.423,3.97938C119.423,1.78163,117.641,0,115.442,0L22.5577,0C20.3592,0,18.5769,1.78163,18.5769,3.97938L18.5769,8.3554C18.5769,14.0467,20.8386,19.5048,24.8643,23.5292C26.2166,24.881,25.2588,27.1924,23.3464,27.1924L18.5769,27.1924C8.31717,27.1924,0,35.5067,0,45.7629L0,54.3848C0,55.1174,0.594084,55.7113,1.32692,55.7113C2.05976,55.7113,2.65385,56.3052,2.65385,57.0378L2.65385,62.3436C2.65385,63.0762,2.05976,63.6701,1.32692,63.6701C0.594084,63.6701,0,64.2639,0,64.9965Z" fill="#D2DFEF" fill-opacity="1"/></g></svg>
--- a/src/web/src/assets/icon/bucket-full.svg
+++ b/src/web/src/assets/icon/bucket-full.svg
--- a/src/web/src/assets/icon/calendar.svg
+++ b/src/web/src/assets/icon/calendar.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="22" height="20" viewBox="0 0 22 20"><g><path d="M15.7143,0.769231C15.7143,0.338462,15.3686,0,14.9286,0C14.4886,0,14.1429,0.338462,14.1429,0.769231L14.1429,1.53846L15.7143,1.53846L15.7143,0.769231ZM7.85714,0.769231C7.85714,0.338462,7.51143,0,7.07143,0C6.63143,0,6.28571,0.338462,6.28571,0.769231L6.28571,1.53846L7.85714,1.53846L7.85714,0.769231ZM18.8571,1.53846L15.7143,1.53846L15.7143,3.84615C15.7143,4.27692,15.3686,4.61538,14.9286,4.61538C14.4886,4.61538,14.1429,4.27692,14.1429,3.84615L14.1429,1.53846L7.85714,1.53846L7.85714,3.84615C7.85714,4.27692,7.51143,4.61538,7.07143,4.61538C6.63143,4.61538,6.28571,4.27692,6.28571,3.84615L6.28571,1.53846L3.14286,1.53846C1.41429,1.53846,0,2.92308,0,4.61538L0,16.9231C0,18.6154,1.41429,20,3.14286,20L18.8571,20C20.5857,20,22,18.6154,22,16.9231L22,4.61538C22,2.92308,20.5857,1.53846,18.8571,1.53846ZM7.07143,15.3846L5.5,15.3846C5.06,15.3846,4.71429,15.0462,4.71429,14.6154C4.71429,14.1846,5.06,13.8462,5.5,13.8462L7.07143,13.8462C7.51143,13.8462,7.85714,14.1846,7.85714,14.6154C7.85714,15.0462,7.51143,15.3846,7.07143,15.3846ZM7.07143,12.3077L5.5,12.3077C5.06,12.3077,4.71429,11.9692,4.71429,11.5385C4.71429,11.1077,5.06,10.7692,5.5,10.7692L7.07143,10.7692C7.51143,10.7692,7.85714,11.1077,7.85714,11.5385C7.85714,11.9692,7.51143,12.3077,7.07143,12.3077ZM11.7857,15.3846L10.2143,15.3846C9.77429,15.3846,9.42857,15.0462,9.42857,14.6154C9.42857,14.1846,9.77429,13.8462,10.2143,13.8462L11.7857,13.8462C12.2257,13.8462,12.5714,14.1846,12.5714,14.6154C12.5714,15.0462,12.2257,15.3846,11.7857,15.3846ZM11.7857,12.3077L10.2143,12.3077C9.77429,12.3077,9.42857,11.9692,9.42857,11.5385C9.42857,11.1077,9.77429,10.7692,10.2143,10.7692L11.7857,10.7692C12.2257,10.7692,12.5714,11.1077,12.5714,11.5385C12.5714,11.9692,12.2257,12.3077,11.7857,12.3077ZM16.5,15.3846L14.9286,15.3846C14.4886,15.3846,14.1429,15.0462,14.1429,14.6154C14.1429,14.1846,14.4886,13.8462,14.9286,13.8462L16.5,13.8462C16.94,13.8462,17.2857,14.1846,17.2857,14.6154C17.2857,15.0462,16.94,15.3846,16.5,15.3846ZM16.5,12.3077L14.9286,12.3077C14.4886,12.3077,14.1429,11.9692,14.1429,11.5385C14.1429,11.1077,14.4886,10.7692,14.9286,10.7692L16.5,10.7692C16.94,10.7692,17.2857,11.1077,17.2857,11.5385C17.2857,11.9692,16.94,12.3077,16.5,12.3077ZM19.6429,7.69231L2.35714,7.69231C1.91714,7.69231,1.57143,7.35385,1.57143,6.92308C1.57143,6.49231,1.91714,6.15385,2.35714,6.15385L19.6429,6.15385C20.0829,6.15385,20.4286,6.49231,20.4286,6.92308C20.4286,7.35385,20.0829,7.69231,19.6429,7.69231Z" fill="#8799AB" fill-opacity="1"/></g></svg>
--- a/src/web/src/assets/icon/camera-off.svg
+++ b/src/web/src/assets/icon/camera-off.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="58" height="58" viewBox="0 0 58 58"><g><path d="M3.89808,0.504957L4.12525,0.705558L57.2919,53.877C58.1914,54.7796,58.2356,56.2257,57.3928,57.1815C56.5501,58.1374,55.11,58.2746,54.1019,57.495L53.8747,57.2944L49.7471,53.1688L7.25,53.1688C3.24594,53.1688,5.26434e-14,49.9226,5.26434e-14,45.9182L5.26434e-14,19.3325C-4.77322e-7,15.328,3.24593,12.0818,7.25,12.0818L8.66375,12.0818L0.708083,4.12303C-0.191427,3.22038,-0.23558,1.77433,0.607184,0.818477C1.44995,-0.137378,2.89002,-0.274572,3.89808,0.504957ZM19.9689,23.388L13.4971,16.9156L7.25,16.9156C6.02481,16.9157,4.9936,17.8328,4.85025,19.0497L4.83333,19.3325L4.83333,45.9182C4.8335,47.1435,5.75048,48.1748,6.96725,48.3181L7.25,48.335L44.9137,48.335L37.0282,40.4488C32.2466,44.7022,24.9783,44.4898,20.4533,39.9643C15.9283,35.4389,15.7159,28.17,19.9689,23.388ZM36.8977,4.83118C37.761,4.8312,38.5588,5.29185,38.9905,6.03962L42.4778,12.0818L50.75,12.0818C54.7541,12.0818,58,15.328,58,19.3325L58,41.0844C58,42.4192,56.918,43.5013,55.5833,43.5013C54.2486,43.5013,53.1667,42.4192,53.1667,41.0844L53.1667,19.3325C53.1667,17.9977,52.0847,16.9156,50.75,16.9156L41.0833,16.9156C40.2198,16.9161,39.4218,16.4553,38.9905,15.7071L35.5033,9.66494L29,9.66252L29,9.66494L21.75,9.66494C20.4153,9.66494,19.3333,8.58286,19.3333,7.24806C19.3333,5.91325,20.4153,4.83118,21.75,4.83118L36.8977,4.83118ZM21.75,31.4169C21.7494,34.2211,23.3658,36.7743,25.9007,37.9732C28.4356,39.172,31.4344,38.8014,33.6013,37.0216L23.3933,26.8151C22.3275,28.1115,21.7465,29.7386,21.75,31.4169Z" fill="#FFFFFF" fill-opacity="1"/></g></svg>
--- a/src/web/src/assets/icon/clock.svg
+++ b/src/web/src/assets/icon/clock.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="22" height="22" viewBox="0 0 22 22"><g><path d="M11,22C17.075,22,22,17.075,22,11C22,4.92497,17.075,0,11,0C4.92497,0,0,4.92497,0,11C0,17.075,4.92497,22,11,22ZM6.29173,14.5417L10.175,10.6582L10.175,6.05C10.175,5.59436,10.5444,5.225,11,5.225C11.4556,5.225,11.825,5.59436,11.825,6.05L11.825,11C11.825,11.2188,11.738,11.4286,11.5833,11.5833L7.45828,15.7083C7.13785,16.0401,6.60764,16.0447,6.28149,15.7185C5.95534,15.3924,5.95995,14.8622,6.29173,14.5417Z" fill="#8799AB" fill-opacity="1"/></g></svg>
--- a/src/web/src/assets/icon/heating.svg
+++ b/src/web/src/assets/icon/heating.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><g><g><ellipse cx="15.000000953674316" cy="15.000000953674316" rx="15.000000953674316" ry="15.000000953674316" fill="#4F85FB" fill-opacity="1"/></g><g><path d="M15.572964310913086,17.493189699554442L15.572964310913086,12.622559699554444C15.572964310913086,12.326459699554444,15.321594310913085,12.085319699554443,15.012934310913085,12.085319699554443L14.968584310913087,12.085319699554443C14.667314310913085,12.085319699554443,14.425184310913085,12.319369699554443,14.425184310913085,12.606599699554444L14.425184310913085,17.493189699554442C13.589774310913086,17.72538969955444,12.977994310913086,18.441689699554445,12.977994310913086,19.296389699554446C12.977994310913086,20.340689699554446,13.881794310913087,21.186389699554443,15.000004310913086,21.186389699554443C16.116354310913085,21.186389699554443,17.020154310913085,20.338889699554443,17.020154310913085,19.296389699554446C17.018304310913088,18.441689699554445,16.406534310913088,17.727189699554444,15.572964310913086,17.493189699554442ZM18.546824310913088,15.335339699554444C18.421144310913085,15.236049699554444,18.34721431091309,15.101299699554444,18.34721431091309,14.962999699554443L18.34721431091309,9.455879699554444C18.34721431091309,7.723599699554443,16.844574310913085,6.315789699554443,14.998154310913087,6.315789699554443C13.151734310913085,6.315789699554443,11.649094310913085,7.723599699554443,11.649094310913085,9.455879699554444L11.649094310913085,14.806969699554443C11.649094310913085,15.039239699554443,11.549284310913086,15.253779699554443,11.377394310913086,15.393849699554444C10.166784310913085,16.374389699554442,9.473684310913086,17.798089699554446,9.473684310913086,19.298089699554446C9.473684310913086,22.150989699554444,11.952204310913086,24.473689699554445,15.000004310913086,24.473689699554445C18.047794310913083,24.473689699554445,20.526284310913084,22.152789699554443,20.526284310913084,19.298089699554446C20.52448431091309,17.762689699554443,19.803684310913084,16.317589699554443,18.546824310913088,15.335339699554444ZM14.998154310913087,22.830089699554442C12.909614310913085,22.830089699554442,11.212904310913085,21.244989699554445,11.212904310913085,19.296389699554446C11.212904310913085,18.08178969955444,11.874584310913086,16.964789699554444,12.981694310913086,16.310519699554444L13.249694310913085,16.152719699554446C13.336564310913086,16.101299699554446,13.390164310913086,16.009099699554444,13.390164310913086,15.911589699554444L13.390164310913086,9.455879699554444C13.390164310913086,8.629629699554442,14.112834310913087,7.957639699554443,15.000004310913086,7.957639699554443C15.887164310913086,7.957639699554443,16.609844310913086,8.629629699554442,16.609844310913086,9.455879699554444L16.609844310913086,15.911579699554443C16.609844310913086,16.009099699554444,16.663444310913086,16.101299699554446,16.750304310913087,16.152719699554446L17.018304310913088,16.310519699554444C18.125414310913087,16.964789699554444,18.785254310913086,18.079989699554446,18.785254310913086,19.296389699554446C18.783404310913085,21.244989699554445,17.084844310913084,22.830089699554442,14.998154310913087,22.830089699554442Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
--- a/src/web/src/assets/icon/progress-finish.svg
+++ b/src/web/src/assets/icon/progress-finish.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><g><path d="M0.0338876,21.6006C0.791888,25.2568,2.6603,28.5461,5.43529,31.1111C5.80569,31.454,6.31565,31.6116,6.8194,31.5389C7.3235,31.4665,7.76624,31.1719,8.02131,30.7391L10.1884,27.0549C10.5503,26.4391,10.4661,25.6645,9.97991,25.1375C8.84698,23.9069,8.02102,22.4346,7.56723,20.8368C7.36685,20.128,6.70975,19.6374,5.96078,19.6374L1.66693,19.6374C1.16648,19.6372,0.692517,19.8581,0.376395,20.2389C0.0591609,20.619,-0.0666573,21.1192,0.0338876,21.6006ZM22.0852,29.174C21.7232,28.5559,20.9949,28.2395,20.2854,28.3921C18.4901,28.7781,16.6239,28.7054,14.8655,28.1807C14.1235,27.9594,13.3239,28.2689,12.9355,28.9278L10.808,32.5469C10.5628,32.9646,10.5176,33.4671,10.6845,33.9204C10.8509,34.3741,11.2133,34.7322,11.6745,34.8985C13.6899,35.6293,15.8187,36,17.9994,36C19.8024,36,21.5824,35.7444,23.2887,35.2393C23.7758,35.0946,24.1692,34.7399,24.3574,34.2758C24.545,33.8109,24.5056,33.2873,24.2505,32.8545L22.0852,29.174ZM29.7455,4.17944C29.4462,3.9339,29.0685,3.79934,28.6784,3.79924C28.5817,3.79924,28.4831,3.80922,28.3864,3.82559C27.9025,3.91049,27.4815,4.20075,27.2359,4.61875L25.1037,8.24068C24.7167,8.90032,24.8432,9.73465,25.4092,10.255C26.8597,11.5847,27.9059,13.2833,28.4313,15.1619C28.6304,15.8724,29.2886,16.3647,30.0393,16.3649L34.3337,16.3649C34.8331,16.3646,35.3062,16.1445,35.6226,15.7652C35.9401,15.3857,36.0664,14.886,35.9664,14.4048C35.1469,10.4185,32.9378,6.78689,29.7455,4.17944ZM24.3574,1.72602C24.1697,1.26149,23.7761,0.906541,23.2887,0.762205C21.5731,0.255605,19.791,-0.00119639,17.9994,0.00000381258C15.8187,0.00000381258,13.6899,0.370486,11.6745,1.10122C10.7057,1.45352,10.2924,2.57637,10.808,3.45511L12.9355,7.07371C13.3239,7.73262,14.1235,8.04214,14.8655,7.82082C15.8814,7.51699,16.9376,7.3629,17.9996,7.3636C18.7626,7.3636,19.5323,7.44547,20.2854,7.60794C20.9944,7.76016,21.7222,7.44468,22.0852,6.82783L24.2508,3.1468C24.5058,2.71413,24.5451,2.1907,24.3574,1.72602ZM34.3337,19.6371L30.0393,19.6371C29.2884,19.6367,28.63,20.1292,28.4313,20.8399C27.9057,22.7185,26.8595,24.4171,25.4092,25.747C24.8431,26.2665,24.7165,27.1004,25.1037,27.7593L27.2359,31.3828C27.4812,31.8011,27.9024,32.0915,28.3864,32.1762C28.4832,32.1926,28.5817,32.2008,28.6784,32.2008C29.0683,32.2013,29.446,32.0673,29.7455,31.8223C32.9378,29.2131,35.1469,25.583,35.9665,21.5972C36.0665,21.1161,35.9402,20.6163,35.6226,20.2368C35.3066,19.857,34.8333,19.6368,34.3337,19.6371ZM0.376135,15.7632C0.692116,16.1438,1.16603,16.3647,1.66666,16.3647L5.96105,16.3647C6.71021,16.3644,7.36726,15.8738,7.5675,15.1652C8.02109,13.5669,8.84706,12.0941,9.98017,10.863C10.4664,10.3367,10.5507,9.56236,10.1887,8.9471L8.02157,5.263C7.76613,4.8302,7.3237,4.53522,6.81966,4.46166C6.73946,4.45042,6.65853,4.44495,6.57751,4.44528C6.1568,4.44528,5.746,4.60263,5.43555,4.89099C2.6603,7.45571,0.791888,10.7448,0.0338876,14.4012C-0.0665431,14.8826,0.0591547,15.3828,0.376135,15.7632Z" fill="#37DF82" fill-opacity="1"/></g></svg>
--- a/src/web/src/assets/logo.png
+++ b/src/web/src/assets/logo.png
--- a/src/web/src/components/HelloWorld.vue
+++ b/src/web/src/components/HelloWorld.vue
@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/web/src/diframe/style/tailwind.css
+++ b/src/web/src/diframe/style/tailwind.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/web/src/main.js
+++ b/src/web/src/main.js
@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import Antd from 'ant-design-vue';
+import "./diframe/style/tailwind.css"
+import "./style/app.css"
+import 'ant-design-vue/dist/reset.css';
+const app = createApp(App);
+app.use(Antd);
+app.mount('#app');
--- a/src/web/src/pages/main/Page.vue
+++ b/src/web/src/pages/main/Page.vue
@ -0,0 +1,51 @@
+<template>
+  <a-layout class="h-full app-bg-default !p-0">
+    <a-layout-header class="!bg-transparent !p-0 !leading-none">
+      <a-row class="h-full">
+        <a-col :span="6" class="p-1">
+          <div class="bg-white h-full rounded-full px-5 text-xl flex flex-row items-center justify-around">
+            <span><img class="h-5" src="../../assets/icon/calendar.svg" /> 2023-09-01</span>
+            <span><img class="h-5" src="../../assets/icon/clock.svg" /> 12:00:00</span>
+          </div>
+        </a-col>
+        <a-col :span="14" class="p-1">
+          <div class="bg-white h-full rounded-full px-5 text-xl flex flex-col justify-center">
+            <div>
+              <img class="h-5" src="../../assets/icon/progress-finish.svg" />
+              <span class="ml-3">A-5 已经加热完成</span>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="4" class="p-1">
+          <div class="h-full px-5 text-xl flex flex-row items-center justify-around">
+            <span class="bg-black text-white block py-2 px-4 rounded-full">A</span>
+            <span class="text-2xl font-bold">ADMIN</span>
+          </div>
+        </a-col>
+      </a-row>
+    </a-layout-header>
+    <a-layout class="!bg-transparent">
+      <a-layout-content class="overflow-hidden">
+        <content-operation />
+      </a-layout-content>
+      <a-layout-sider class="!bg-transparent p-1" width="150">
+        <div class="h-full flex flex-col justify-between">
+          <div>
+            <div class="bg-blue-400 text-white px-5 py-3 text-xl rounded-full mb-1">实验操作</div>
+            <div class="text-gray-400 px-5 py-3 text-xl rounded-full mb-1">操作记录</div>
+            <div class="text-gray-400 px-5 py-3 text-xl rounded-full mb-1">预设管理</div>
+            <div class="text-gray-400 px-5 py-3 text-xl rounded-full mb-1">酸液管理</div>
+            <div class="text-gray-400 px-5 py-3 text-xl rounded-full mb-1">用户管理</div>
+            <div class="text-gray-400 px-5 py-3 text-xl rounded-full mb-1">功能测试</div>
+          </div>
+          <div>
+            <div class="text-gray-400 px-5 py-3 text-xl rounded-full mb-1">退出登录</div>
+          </div>
+        </div>
+      </a-layout-sider>
+    </a-layout>
+  </a-layout>
+</template>
+<script setup>
+import ContentOperation from './contents/Operation.vue'
+</script>
--- a/src/web/src/pages/main/contents/Operation.vue
+++ b/src/web/src/pages/main/contents/Operation.vue
@ -0,0 +1,108 @@
+<template>
+  <div class="h-full flex flex-col">
+    <a-row class="h-0 grow">
+      <!-- 拍照区 -->
+      <a-col :span="9" class="p-1">
+        <div class="h-full flex flex-col bg-white rounded-2xl p-5">
+          <div class="camera h-0 grow rounded-2xl flex flex-col justify-center items-center">
+            <div>
+              <p class="m-0 text-center"><img src="../../../assets/icon/camera-off.svg" /></p>
+              <p class="m-0 mt-2 text-2xl text-white">未检测到照相设备</p>
+            </div>
+          </div>
+          <div class="mt-3">
+            <a-button>拍照</a-button>
+          </div>
+        </div>
+      </a-col>
+      
+      <!-- 加热区 -->
+      <a-col :span="10" class="p-1">
+        <div class="h-full flex flex-col bg-white rounded-2xl p-5">
+          <div class="h-0 grow flex flex-col">
+            <div class="text-xl text-blue-500 mb-3">
+              <img src="../../../assets/icon/heating.svg" class="inline-block w-6 h-6 mr-2" /> 
+              <span>石墨加热区</span>
+            </div>
+            <div class="heating-plate h-0 grow bg-green-400 flex flex-col justify-center items-center rounded-full">
+              <div class="relative w-1/4 h-1/4">
+                <div v-for="i in 5" :key="i" class="tube-rack-slot absolute h-full w-full" 
+                  :class="{active:0!==i%2}" 
+                  :style="{transform: `rotateZ(${(i-1)*72}deg) translateY(140%)`}"
+                >
+                  <div class="title absolute w-full text-center">
+                    <p class="mb-1">A - {{ i }}</p>
+                    <p class="mb-0">预设001</p>
+                  </div>
+                  <a-row class="tube-rack p-1 rounded-lg h-full">
+                    <a-col class="p-1" v-for="tubeIndex in 16" :key="tubeIndex" :span="6">
+                      <div class="tube rounded-full h-full w-full"></div>
+                    </a-col>
+                  </a-row>
+                  <div class="text-center" v-if="1==i"><a-badge status="success" /></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-3 flex flex-row justify-around">
+            <a-button>暂停加热</a-button>
+            <a-button>清洗石墨盘</a-button>
+            <a-button>加载预设</a-button>
+            <a-button>加酸</a-button>
+            <a-button>加热</a-button>
+          </div>
+        </div>
+      </a-col>
+
+      <!-- 温度 -->
+      <a-col :span="5" class="p-1">
+        <div class="h-full flex flex-col bg-white rounded-2xl p-5">
+          <a-row class="mb-3 text-blue-500">
+            <a-col :span="20" class="text-xl">加热温度</a-col>
+            <a-col :span="4" class="text-right text-xl">℃</a-col>
+          </a-row>
+          <div class="h-0 grow">
+            <div v-for="i in 5" :key="i" class="bg-gray-100 mb-2 flex flex-row p-2 rounded-2xl">
+              <div class="flex flex-row items-center">
+                <a-progress type="circle" :percent="75" :size="50" :strokeWidth="18"/>
+              </div>
+              <div class="ml-2 bg-amber-500 rounded-2xl py-2 px-4 text-white w-0 grow text-center">
+                <p class="mb-0 text-2xl">270℃</p>
+                <p class="mb-0">石墨盘1号位</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+  <div class="p-1">
+    <div class="flex flex-row justify-evenly bg-white rounded-2xl p-5">
+      <div v-for="i in 9" :key="i">
+        <div class="w-full relative">
+          <div class="h-full w-full text-center">
+            <img class="w-1/2" src="../../../assets/icon/bucket-full.svg" />
+          </div>
+          <div class="h-full w-full text-center absolute top-0 overflow-hidden" :style="{height:`${Math.random()*100}%`}">
+            <img class="w-1/2" src="../../../assets/icon/bucket-empty.svg" />
+          </div>
+        </div>
+        <div class="mx-2 p-2 mt-3 rounded-2xl" style="background:#D2DFEF;color:#8799AB;">
+          <span class="inline-block p-1 rounded-2xl mr-1" style="background:#DCE8F7;">3000g</span>
+          <span class="inline-block py-1">5000g</span>
+        </div>
+        <div class="text-center mt-1">硫酸</div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+<style scoped>
+.heating-plate {background: #EEEFF8;border: solid 12px #E5E7F2;}
+.tube-rack-slot .title {font-size: 16px;font-weight: bold;letter-spacing: 0.06em;top:-45px;color: #D6D9F1;}
+.tube-rack-slot.active .title {color:#26D574;}
+.tube-rack-slot .tube-rack {background:#D6D9F1;}
+.tube-rack-slot.active .tube-rack {background:#1B1B1B;}
+.tube-rack-slot .tube {background:#FFFFFF;}
+.tube-rack-slot.active .tube {background:#26D574;}
+.camera {background: linear-gradient(180deg, rgba(5, 10, 39, 0.5) 0%, rgba(4, 10, 52, 0.5) 97%);backdrop-filter: blur(194px);}
+</style>
--- a/src/web/src/style/app.css
+++ b/src/web/src/style/app.css
@ -0,0 +1,4 @@
+html,body,#app {height:100%;}
+body {background-color: #D2DFEF;}
+
+.app-bg-default {background-color: #D2DFEF;}
--- a/src/web/tailwind.config.js
+++ b/src/web/tailwind.config.js
@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false,
+  },
+}
+
--- a/src/web/vue.config.js
+++ b/src/web/vue.config.js
@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})