补充LoginPage

devcloud/web/docs/README.md

@@ -1,5 +1,27 @@
 # 页面开发流程
 
+vue3 + ui组件库
+
+## 安装UI组件
+
+- [element plus (vue3版本)](https://element-plus.sxtxhy.com/zh-CN/)
+- [TDesign](https://tdesign.tencent.com/vue-next/overview)
+- [ant design for vue](https://2x.antdv.com/components/page-header-cn)
+- [arco design](https://arco.design/vue/docs/start)
+
+从UI的精美和官方的维护度来考虑, 这里选择使用 arco design
+
+```sh
+npm install --save-dev @arco-design/web-vue
+```
+
+```js
+// UI 组件库
+import ArcoVue from '@arco-design/web-vue'
+import '@arco-design/web-vue/dist/arco.css'
+app.use(ArcoVue)
+```
+
 ## 登陆页面
 
 ![alt text](login.png)

devcloud/web/package-lock.json

@@ -12,6 +12,7 @@
         "vue-router": "^4.5.1"
       },
       "devDependencies": {
+        "@arco-design/web-vue": "^2.57.0",
         "@eslint/js": "^9.31.0",
         "@vitejs/plugin-vue": "^6.0.1",
         "@vue/eslint-config-prettier": "^10.2.0",
@@ -40,6 +41,37 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@arco-design/color": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/@arco-design/color/-/color-0.4.0.tgz",
+      "integrity": "sha512-s7p9MSwJgHeL8DwcATaXvWT3m2SigKpxx4JA1BGPHL4gfvaQsmQfrLBDpjOJFJuJ2jG2dMt3R3P8Pm9E65q18g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color": "^3.1.3"
+      }
+    },
+    "node_modules/@arco-design/web-vue": {
+      "version": "2.57.0",
+      "resolved": "https://registry.npmmirror.com/@arco-design/web-vue/-/web-vue-2.57.0.tgz",
+      "integrity": "sha512-R5YReC3C2sG3Jv0+YuR3B7kzkq2KdhhQNCGXD8T11xAoa0zMt6SWTP1xJQOdZcM9du+q3z6tk5mRvh4qkieRJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@arco-design/color": "^0.4.0",
+        "b-tween": "^0.3.3",
+        "b-validate": "^1.5.3",
+        "compute-scroll-into-view": "^1.0.20",
+        "dayjs": "^1.11.13",
+        "number-precision": "^1.6.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.31",
+        "vue": "^3.1.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.1.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -1893,6 +1925,20 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/b-tween": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/b-tween/-/b-tween-0.3.3.tgz",
+      "integrity": "sha512-oEHegcRpA7fAuc9KC4nktucuZn2aS8htymCPcP3qkEGPqiBH+GfqtqoG2l7LxHngg6O0HFM7hOeOYExl1Oz4ZA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/b-validate": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmmirror.com/b-validate/-/b-validate-1.5.3.tgz",
+      "integrity": "sha512-iCvCkGFskbaYtfQ0a3GmcQCHl/Sv1GufXFGuUQ+FE+WJa7A/espLOuFIn09B944V8/ImPj71T4+rTASxO2PAuA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2025,6 +2071,17 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@@ -2045,6 +2102,41 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -2109,6 +2201,13 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.1.tgz",
@@ -2776,6 +2875,13 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-3.0.0.tgz",
@@ -3161,6 +3267,13 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/number-precision": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/number-precision/-/number-precision-1.6.0.tgz",
+      "integrity": "sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ohash": {
       "version": "2.0.11",
       "resolved": "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz",
@@ -3423,6 +3536,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3493,6 +3613,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.2.tgz",
@@ -3542,6 +3672,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmmirror.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/sirv": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/sirv/-/sirv-3.0.1.tgz",

devcloud/web/package.json

@@ -18,6 +18,7 @@
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
+    "@arco-design/web-vue": "^2.57.0",
     "@eslint/js": "^9.31.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/eslint-config-prettier": "^10.2.0",

devcloud/web/src/App.vue

@@ -1,11 +1,10 @@
-<script setup></script>
+<script setup>
+import { RouterView } from 'vue-router'
+</script>
 
 <template>
-  <h1>You did it!</h1>
+  <!-- 路由对应的页面视图 -->
-  <p>
+  <RouterView />
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
 </template>
 
 <style scoped></style>

devcloud/web/src/assets/main.css

@@ -0,0 +1,9 @@
+body {
+  height: 100vh;
+  width: 100vw;
+}
+
+#app {
+  height: 100%;
+  width: 100%;
+}

devcloud/web/src/main.js

@@ -4,6 +4,15 @@ import router from './router'
 
 const app = createApp(App)
 
-app.use(router)
+// UI 组件库
+import ArcoVue from '@arco-design/web-vue'
+import ArcoVueIcon from '@arco-design/web-vue/es/icon'
+import '@arco-design/web-vue/dist/arco.css'
+app.use(ArcoVue)
+app.use(ArcoVueIcon)
 
+// 样式加载
+import './assets/main.css'
+
+app.use(router)
 app.mount('#app')

devcloud/web/src/pages/HomePage.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-
+    <a-space>
+      <a-button type="primary">Primary</a-button>
+      <a-button>Secondary</a-button>
+      <a-button type="dashed">Dashed</a-button>
+      <a-button type="outline">Outline</a-button>
+      <a-button type="text">Text</a-button>
+    </a-space>
   </div>
 </template>
 

devcloud/web/src/pages/LoginPage.vue

@@ -1,11 +1,62 @@
 <template>
-  <div>
+  <div class="login">
-    登陆页面
+    <!-- form登录表单 -->
+    <div :style="{ width: '480px', height: '400px' }">
+      <div style="display: flex; height: 40px;justify-content: center;align-items:center;margin-bottom: 12px;">
+        <h2>欢迎登录</h2>
+      </div>
+      <a-form :model="form" size="large" @submit="handleSubmit">
+        <a-form-item hide-label field="name" tooltip="Please enter username" label="Username">
+          <a-input v-model="form.name" placeholder="please enter your username...">
+            <template #prefix>
+              <icon-user />
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item hide-label field="password" label="Password">
+          <a-input-password :invisible-button="false" v-model="form.password" placeholder="Please enter something"
+            allow-clear>
+            <template #prefix>
+              <icon-lock />
+            </template>
+          </a-input-password>
+        </a-form-item>
+        <a-form-item hide-label field="remember">
+          <a-checkbox v-model="form.remember"> 记住 </a-checkbox>
+        </a-form-item>
+        <a-form-item hide-label>
+          <a-button type="primary" :style="{ width: '100%' }" html-type="submit">登录</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
+
+// 表单对象
+const form = ref({
+  name: '',
+  password: '',
+  remember: false,
+})
+
+// 表单的提交
+const handleSubmit = (data) => {
+  console.log(data);
+}
 
 </script>
 
-<style lang="css" scoped></style>
+<style lang="css" scoped>
+.login {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+</style>

devcloud/web/src/pages/mpaas/ApplicatonPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-
+    <!-- 登录表单 -->
   </div>
 </template>
 

skills/vue/vue3-demo/src/main.js

@@ -8,6 +8,4 @@ const app = createApp(App)
 
 app.use(router)
 
-
-
 app.mount('#app')