first commit

first commit

.env

@@ -0,0 +1,2 @@
+# NODE_ENV = 'production'
+VUE_APP_BASE_URL = 'http://www.aida.com.hk'

.env.test

@@ -1,2 +1,2 @@
-NODE_ENV = 'production'
+NODE_ENV = 'development'
-VUE_APP_BASE_URL = 'http://18.162.111.141:80'
+VUE_APP_BASE_URL = 'http://18.167.251.121:10086'

.env.test_build

@@ -0,0 +1,2 @@
+NODE_ENV = 'production'
+VUE_APP_BASE_URL = 'http://18.167.251.121:10086'

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
     root: true, // 停止在父级目录中寻找
     env: {
       es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
-      node: true // Node.js 全局变量和 Node.js 作用域
+      node: true, // Node.js 全局变量和 Node.js 作用域
     },
     extends: ['plugin:vue/essential'],
     rules: {

package-lock.json

@@ -9,8 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@ans1998/vue3-color": "^3.0.7",
+        "@flaticon/flaticon-uicons": "^2.2.0",
         "ant-design-vue": "^3.2.12",
-        "axios": "^0.27.2",
+        "axios": "^1.4.0",
         "core-js": "^3.8.3",
         "file-saver": "^2.0.5",
         "html2canvas": "^1.4.1",
@@ -1809,6 +1810,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/@flaticon/flaticon-uicons": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.2.0.tgz",
+      "integrity": "sha512-9rZ9dKhqrR/XLI84HHfOwetK8ew/Y0FONp5l6n+fMhqGBrDZKkOGMjAoEgSfBH6d+VaVGcm0E28xhlBt7ggbRg==",
+      "optionalDependencies": {
+        "esbuild-linux-64": "^0.14.5"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -3693,12 +3702,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.27.2",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
       "dependencies": {
-        "follow-redirects": "^1.14.9",
+        "follow-redirects": "^1.15.0",
-        "form-data": "^4.0.0"
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "node_modules/babel-eslint": {
@@ -5365,6 +5375,21 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "node_modules/esbuild-linux-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
@@ -9434,6 +9459,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@@ -13293,6 +13323,14 @@
         }
       }
     },
+    "@flaticon/flaticon-uicons": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.2.0.tgz",
+      "integrity": "sha512-9rZ9dKhqrR/XLI84HHfOwetK8ew/Y0FONp5l6n+fMhqGBrDZKkOGMjAoEgSfBH6d+VaVGcm0E28xhlBt7ggbRg==",
+      "requires": {
+        "esbuild-linux-64": "^0.14.5"
+      }
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -14844,12 +14882,13 @@
       }
     },
     "axios": {
-      "version": "0.27.2",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
       "requires": {
-        "follow-redirects": "^1.14.9",
+        "follow-redirects": "^1.15.0",
-        "form-data": "^4.0.0"
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "babel-eslint": {
@@ -16198,6 +16237,12 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "esbuild-linux-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
+      "optional": true
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
@@ -19340,6 +19385,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",

package.json

@@ -5,13 +5,15 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build:test": "vue-cli-service build --mode test",
+    "serve:test": "vue-cli-service serve --mode test",
+    "build:test": "vue-cli-service build --mode test_build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@ans1998/vue3-color": "^3.0.7",
+    "@flaticon/flaticon-uicons": "^2.2.0",
     "ant-design-vue": "^3.2.12",
-    "axios": "^0.27.2",
+    "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",

src/assets/style/style.css

@@ -0,0 +1,173 @@
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: 'Roboto', sans-serif;
+}
+input {
+  outline: none;
+}
+.page_content {
+  width: 1440px;
+  max-width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+.button_first {
+  width: 9.85rem;
+  text-align: center;
+  background: #E0E0F6;
+  height: 4rem;
+  line-height: 4rem;
+  font-size: 1.3rem;
+  font-weight: 400;
+  color: #343579;
+  cursor: pointer;
+}
+.button_second {
+  width: 9.85rem;
+  text-align: center;
+  background: #343579;
+  height: 4rem;
+  line-height: 4rem;
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: #fff;
+  cursor: pointer;
+}
+.system_silder {
+  width: 100%;
+}
+.system_silder .ant-slider {
+  margin: 0;
+  width: 12rem;
+}
+.system_silder .ant-slider .ant-slider-rail {
+  height: 0.6rem;
+  border-radius: 0.3rem;
+  background: #F2F0FD;
+}
+.system_silder .ant-slider .ant-slider-track {
+  height: 0.6rem;
+  border-radius: 0.3rem;
+  background: #343579;
+}
+.system_silder .ant-slider .ant-slider-handle {
+  margin-top: -0.4rem;
+  border: solid 0.2rem #343579;
+}
+.ant-tooltip {
+  z-index: 2;
+}
+.ant-tooltip .ant-tooltip-inner {
+  background: #343579;
+  border-radius: 5px;
+  padding: 0.6rem 0.5rem;
+}
+.select_block .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background: transparent;
+  height: 4rem;
+  border: 0.1rem solid #000 !important;
+  border-radius: 0;
+  box-shadow: none !important;
+}
+.select_block .ant-select-single .ant-select-selector .ant-select-selection-item,
+.select_block .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+  line-height: 3.8rem;
+  color: #1A1A1A;
+  font-size: 1.3rem;
+  font-weight: bold;
+}
+.modal_component.ant-modal {
+  top: 0;
+}
+.modal_component .ant-modal-content {
+  overflow: hidden;
+}
+.modal_component .ant-modal-content .ant-modal-header {
+  padding: 2.4rem 2.6rem;
+  background: #F7F7F7;
+}
+.modal_component .ant-modal-content .ant-modal-header .ant-modal-title {
+  font-size: 1.8rem;
+  line-height: 1.8rem;
+  color: #030303;
+}
+.modal_component .ant-modal-content .ant-modal-body {
+  padding: 0;
+}
+.collection_modal .ant-modal-body {
+  height: calc(80vh - 6.4rem);
+  overflow-y: hidden;
+}
+.collection_modal .ant-upload.ant-upload-select-picture-card {
+  width: 16.5rem;
+  height: 16.5rem;
+  background: #FFFFFF;
+  border: 0.3rem dashed #EDEDED;
+  margin: 0 2rem 2rem 0;
+}
+.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
+  font-size: 3.2rem;
+  color: #B7B7B7;
+}
+.collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text {
+  font-size: 1.6rem;
+  color: #B7B7B7;
+}
+.collection_modal .ant-upload-list-picture-card-container {
+  display: none !important;
+}
+.collection_modal .ant-upload-picture-card-wrapper {
+  width: auto;
+  vertical-align: top;
+}
+.cut_pricture_modal .ant-modal-body {
+  height: 65.4rem;
+  overflow-y: hidden;
+}
+.scroll_style::-webkit-scrollbar-button:single-button {
+  display: block;
+  border-style: solid;
+  height: 1.3rem;
+  width: 1.4rem;
+}
+.scroll_style::-webkit-scrollbar-button:single-button:vertical:decrement {
+  border-width: 0 0.8rem 0.8rem 0.8rem;
+  border-color: transparent transparent #555555 transparent;
+}
+.scroll_style::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
+  border-color: transparent transparent #777777 transparent;
+}
+.scroll_style::-webkit-scrollbar-button:single-button:vertical:increment {
+  border-width: 0.8rem 0.8rem 0 0.8rem;
+  border-color: #555555 transparent transparent transparent;
+}
+.scroll_style::-webkit-scrollbar-button:vertical:single-button:increment:hover {
+  border-color: #777777 transparent transparent transparent;
+}
+.scroll_style::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 1.4rem;
+  /*高宽分别对应横竖滚动条的尺寸*/
+}
+.scroll_style::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  background: #c2c2c2;
+  opacity: 0.8;
+  border-radius: 0.7rem;
+}
+.mark_loading {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  left: 0;
+  top: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/assets/style/style.less

@@ -5,6 +5,9 @@ html,body,#app{
     height: 100%;
     font-family: 'Roboto', sans-serif;
 }
+input{
+	outline:none
+}
 .page_content{
     width: 1440px;
     max-width: 100%;
@@ -83,6 +86,7 @@ html,body,#app{
   }
 }
 
+
 //弹窗公共样式
 
 .modal_component{

src/component/Detail/habit.vue

@@ -0,0 +1,433 @@
+<template>
+    <div class="habit">
+        <div class="habit_button" @click="habitBtn" ref="stringg">
+            Workspace
+            <i class="fi fi-bs-angle-down"></i>
+        </div>
+		
+        <div class="habit_content" v-fade="habit">
+            <div class="habit_title">
+                <h3 class="" @click="aaa()">Workspace Setting</h3>
+                <div class="habit_intro">adjust your workspace setting</div>
+            </div>
+            <div class="habit_type">
+                <a-dropdown>
+                    <template #overlay>
+                        <a-menu @click="habitTypeclick">
+                            <a-menu-item aaa="22" key="1st menu item"> 1st menu item </a-menu-item>
+                            <a-menu-item key="2nd menu item"> 2nd menu item </a-menu-item>
+                            <a-menu-item key="3rd item"> 3rd item </a-menu-item>
+                        </a-menu>
+                    </template>
+                    <a-button>
+                        <UserOutlined />
+                        {{habitType.habitTypeone}}
+                        <DownOutlined />
+                    </a-button>
+                </a-dropdown>
+            </div>
+
+            <div class="habit_Overal_Single">
+                <div
+                    class="habit_Overal_Single_text"
+                    :class="{ active: !checked }"
+                >
+                    Overal
+                </div>
+                <a-switch v-model:checked="checked" />
+                <div
+                    class="habit_Overal_Single_text"
+                    :class="{ active: checked }"
+                >
+                    Single
+                </div>
+            </div>
+            <div class="habit_habit_singleton" v-show="checked">
+                <a-dropdown >
+                    <template #overlay>
+                        <a-menu @click="handleMenuClick">
+                            <a-menu-item key="1"> 上衣 </a-menu-item>
+                            <a-menu-item key="2"> 裤子 </a-menu-item>
+                        </a-menu>
+                    </template>
+                    <a-button>
+                        <UserOutlined />
+                        上衣
+                        <DownOutlined />
+                    </a-button>
+                </a-dropdown>
+            </div>
+			<div class="habit_System_Designer">
+                <a-slider id="system_silder"
+                    v-model:value="value"
+                    @afterChange="systemDesigner"
+					:tip-formatter="formatter"
+				>
+                </a-slider>
+                <div class="habit_System_Designer_text_max">
+                    <div class="habit_System_Designer_text">System</div>
+                    <div class="habit_System_Designer_text">Designer</div>
+                </div>
+            </div>
+			<div class="habit_model">
+                <a-dropdown placement="bottomRight"
+					trigger="['click']"
+					@click="modelBtn"
+					>
+                    <a-button>
+                        <UserOutlined />
+                        Mannequin
+                        <DownOutlined />
+                    </a-button>
+                </a-dropdown>
+            </div>
+			<div id="modelShow" class="habit_model_show"  v-fade="model">
+				<div class="habit_btn">
+					<div class="model_current">
+					<div class="model_text">Current</div>
+					<div class="model_img">
+						<img src="" alt="">
+					</div>
+				</div>
+				<div class="model_Designer">
+					<div class="model_text">
+						<div
+							class="habit_Overal_Single_text"
+							:class="{ active: !checked }"
+						>
+							System
+						</div>
+						<a-switch v-model:checked="checked" />
+						<div
+							class="habit_Overal_Single_text"
+							:class="{ active: checked }"
+						>
+							Seleves
+						</div>
+					</div>
+					<div class="model_img">
+						<div v-for="(item,index) in checked?obj:obj2" :key="item.id">
+							<img :src="item.url" alt="">
+						</div>
+					</div>
+				</div>
+				</div>
+				
+			</div>
+        </div>
+	
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, createVNode, ref,Ref} from "vue";
+import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
+import type { MenuProps } from "ant-design-vue";
+export default defineComponent({
+    components: {
+        DownOutlined,
+        UserOutlined,
+    },
+	setup(){
+		let checked:any= ref(true);
+		let value = ref<number>(30);
+		let tooltip = ref(true);
+		let habit = ref(false);
+		let model = ref(false);
+		let habitType = ref({
+			habitTypeone:"Workspace Setting",
+			habitTypeList:[
+				{
+					id:1,
+					name:"11111"
+				},
+				{
+					id:2,
+					name:"222"
+				},
+				{
+					id:2,
+					name:"333"
+				},
+			],
+		});
+		let obj= ref([
+			{
+				id:1,
+				url:"11111"
+			},
+			{
+				id:2,
+				url:"11111"
+			},
+		]);
+		let obj2= ref([
+			{
+				id:1,
+				url:"22"
+			},
+			{
+				id:2,
+				url:"222"
+			},
+		])
+		// const stringg = ref()
+		const habitTypeclick : MenuProps['onClick'] = (e)=>{
+			
+			// this.habitType.habitTypeone = e
+		}
+		// const stringg:Ref<HTMLElement | null> = ref(null)
+		// const aaa = ()=>{
+		// 	if(stringg.value){
+		// 		console.log(stringg.value.classList)
+		// 	}
+		// }
+			
+	return{
+			habitTypeclick,
+			checked,
+			value,
+			tooltip,
+			habit,
+			model,
+			habitType,
+			obj,
+			obj2,
+		}
+    },
+    data() {
+
+        return {
+        };
+    },
+    mounted() {},
+	directives:{
+		fade:{
+			updated (el,model){
+				
+				if(model.value){
+					el.style.display="block"
+					setTimeout(() => {
+						el.classList.add("active")
+					}, 100);
+				}else{
+					el.classList.remove("active")
+					setTimeout(() => {
+					el.style.display="none"
+					}, 100);
+				}
+			}
+		}
+	},
+    methods: {
+	
+        handleButtonClick(e: Event) {
+            console.log("click left button", e);
+        },
+        handleMenuClick(e: Event) {
+            console.log("click", e);
+        },
+        systemDesigner(num: Number) {
+            console.log(num);
+        },
+		formatter(value: number) {
+			return `${value}%`;
+		},
+		habitBtn(){
+			const aa = this.$refs.stringg
+			// const aa = this.$refs.stringg;
+			// aa.style
+			console.log(aa);
+			
+			this.habit = !this.habit
+			if(!this.habit){
+				this.model = false
+			}
+		},
+		modelBtn(){
+			this.model = !this.model
+		},
+    },
+});
+</script>
+<style lang="less" scoped>
+.habit {
+    position: relative;
+    .habit_button {
+		background-color: #fff;
+        border: solid 2px #000;
+        padding: 0px 20px;
+        box-sizing: initial;
+        font-weight: 600;
+        height: 32px;
+        line-height: 32px;
+        padding: 4px 15px;
+        font-size: 14px;
+		cursor: pointer;
+        .fi-bs-angle-down {
+            margin-left: 10px;
+            display: inline-block;
+            transform: translateY(2px);
+        }
+    }
+    .habit_content {
+        border: solid 2px #000;
+        border-radius: 10px;
+        padding: 20px 20px;
+		// zoom: .75;
+        transform-origin: top right;
+        position: absolute;
+        right: -3px;
+        top: 110%;
+        background: #fff;
+        // width: 25rem;
+		width: 200px;
+		opacity: 0;
+		transition: all .3s;
+        transform: scale(0.75)translateY(10%);
+		display: none;
+		&.active{
+			opacity: 1;
+			transform: scale(0.75)translateY(0%);
+		}
+        .habit_title {
+            h3 {
+                font-size: 16px;
+                font-weight: 600;
+                color: #000;
+                margin: 0;
+            }
+            .habit_intro {
+                font-size: 12px;
+                color: rgba(0, 0, 0, 0.5);
+                font-weight: 500;
+            }
+        }
+        .habit_type {
+            margin-top: 15px;
+        }
+        .habit_Overal_Single {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 30px 0;
+            .habit_Overal_Single_text {
+                font-weight: 600;
+                color: rgba(0, 0, 0, 0.5);
+                &.active {
+                    color: rgba(0, 0, 0, 0.7);
+                    font-weight: 900;
+                }
+                :deep(.ant-switch-checked) {
+                    background-color: #000;
+                }
+            }
+            :deep(.ant-switch) {
+                margin: 0 10px;
+            }
+        }
+        .habit_habit_singleton {
+            margin-bottom: 30px;
+        }
+        .habit_System_Designer {
+			margin-top: 80px;
+            :deep(.ant-slider-track),
+            :deep(.ant-slider-rail) {
+                height: 0.6rem;
+                background-color: #e1e1e1;
+                border-radius: 0.5rem;
+            }
+            :deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
+            :deep(.ant-slider-handle) {
+                background-color: #2d2e76 !important;
+                border: none !important;
+            }
+            :deep(.ant-slider-handle:hover) {
+                box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
+            }
+           
+            .habit_System_Designer_text_max {
+                display: flex;
+                justify-content: space-between;
+                .habit_System_Designer_text {
+                }
+            }
+        }
+		.habit_model{
+			margin-top: 20px;
+			
+		}
+		
+		.habit_model_show{
+			position: absolute;
+			border: solid 2px #000;
+			border-radius: 10px;
+			padding: 20px 20px;
+			bottom: -5px;
+			transform: translateY(110%);
+			right: -2px;
+			width: 35rem;
+			opacity: 0;
+			transition: all .3s;
+			display: none;
+			&.active{
+				opacity: 1;
+				transform: translateY(100%);
+			}
+			.habit_btn{
+				display: flex;
+				justify-content: space-between;
+			}
+			.model_Designer{
+				.model_text{
+					display: flex;
+					:deep(.ant-switch) {
+						margin: 0 10px;
+					}
+				}
+			}
+			.model_img{
+					display: flex;
+			}
+		}
+		
+    }
+}
+.habit :deep(.ant-dropdown-button) {
+    margin-right: 8px;
+    margin-bottom: 8px;
+}
+.habit :deep(.ant-btn:hover),
+:deep(.ant-btn:focus),
+:deep(.ant-btn:active),
+:deep(.ant-btn::after) {
+    color: #000;
+    border-color: #000 !important;
+    box-shadow: none !important;
+}
+.habit :deep(.ant-btn) {
+    box-shadow: none !important;
+    color: rgba(0, 0, 0, 0.5);
+    box-shadow: none;
+    border: none;
+    background: #f6f6f6;
+    width: 100%;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>
+<style>
+
+.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
+	background: #000 !important;
+}
+.habit_mod{
+	background-color: #000 !important;
+	/* top: 0 !important; */
+	/* left: 0 !important; */
+}
+.ant-tooltip .ant-tooltip-inner ,.ant-tooltip-arrow-content{
+	background: #000 !important;
+}
+</style>

src/component/HomePage/Generate.vue

@@ -0,0 +1,470 @@
+<template>
+    <div>
+        <a-modal class="my_material_modal" 
+            v-model:visible="generateShow" 
+            :footer="null" 
+            width="80%"
+            :maskClosable="false"
+            :centered="true"
+        >
+            <div class="my_material_header">
+                <div class="my_material_title">My Library</div>
+                <div class="my_material_header_right">
+                    <div class="content_search_block">
+                        <input class="search_input" placeholder="Please input" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
+                        <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
+                    </div>
+
+                    <div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div>
+                </div>
+            </div>
+
+            <div class="my_material_content">
+                <div class="material_content_top">
+                    <div class="material_content_top_title"></div>
+                    <div class="material_content_top_right">
+                        <div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
+                            <a-select
+                                ref="select"
+                                v-model:value="designType"
+                                :options="disignTypeList"
+                                placeholder="All"
+                                :allowClear="true"
+                                @change="handleChange"
+                            >
+                                <template #suffixIcon
+                                    ><span
+                                        class="icon iconfont icon-xiala"
+                                        style="color: #343579"
+                                    ></span
+                                ></template>
+                            </a-select>
+                        </div>
+                        <div :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()"  v-show="imgList.length">
+                            <div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
+                            <div>all</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="material_content_body scroll_style">
+                    <div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
+                        <div :class="['content_img_item_block', selectImgListIds.indexOf(img.id) > -1 ? 'select_item_img' :'']">
+                            <img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url"/>
+                        </div>
+                        <div class="content_img_name">{{img.name}}</div>
+                    </div>
+                    <div class="no_data_block" v-show="!imgList.length && !isShowLoading">
+                        <img src="@/assets/images/homePage/null_img.png">
+                    </div>
+                </div>
+                <div class="no_data_block loading_block" v-show="isShowLoading">
+                    <a-spin size="large"></a-spin>
+                </div>
+                <div class="material_confirm" @click="confirmSelect()"  v-show="imgList.length">Confirm</div>
+                <div class="table_pagination" v-show="imgList.length">
+                    <a-pagination
+                        
+                        v-model:current="currentPage"
+                        v-model:pageSize="pageSize"
+                        :total="total"
+                        :showSizeChanger="false"
+                        :showQuickJumper="true"
+                        @change="changePage"
+                    />
+                </div>
+            </div>
+        </a-modal>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent, ref} from 'vue'
+import { Https } from "@/tool/https";
+import { message } from 'ant-design-vue';
+export default defineComponent({
+    setup() {
+        let myMaterialModalShow = ref(false)
+        let imgList = ref([])
+        let selectImgList:any = ref([])
+        let selectImgListIds:any = ref([])
+        let isShowLoading:any = ref(false)
+        let selectCode:any = ref('')
+        let currentPage:any = ref(1)
+        let searchPictureName = ref('')
+        let pageSize = ref(20)
+        let total = ref(0)
+        let searcMaterialhName:any = ref('') //搜索名字
+        let designType:any = ref(null)
+        let disignTypeList = [
+                {
+                    value: "Outwear",
+                    label: "Outwear",
+                },
+                {
+                    value: "Blouse",
+                    label: "Blouse",
+                },
+                {
+                    value: "Dress",
+                    label: "Dress",
+                },
+                {
+                    value: "Trousers",
+                    label: "Trousers",
+                },
+                {
+                    value: "Skirt",
+                    label: "Skirt",
+                },
+            ]
+        let boardList = {
+            Moodboard:'Mood',
+            Printboard:'Print',
+            Sketchboard:'Sketch',
+            MarketingSketch:'MarketingSketch'
+        }
+        return{
+            myMaterialModalShow,
+            imgList,
+            selectImgList,
+            selectImgListIds,
+            isShowLoading,
+            selectCode,
+            currentPage,
+            searchPictureName,
+            pageSize,
+            total,
+            searcMaterialhName,
+            designType,
+            disignTypeList,
+            boardList
+        }
+    },
+    methods:{
+
+        init(code:any){
+            this.selectCode = code
+            this.myMaterialModalShow = true
+            this.getLibraryList()
+        },
+        
+        selectImgItem(imgData:any){
+            this.selectImgListIds =  this.selectImgList.map((v:any)=>v.id)
+            if(this.selectImgListIds.indexOf(imgData.id) === -1){
+                this.selectImgList.push(imgData)
+                this.selectImgListIds.push(imgData.id)
+            }else{
+                let index = this.selectImgListIds.indexOf(imgData.id)
+                this.selectImgList.splice(index,1)
+                this.selectImgListIds.splice(index,1)
+            }
+        },
+
+
+        //改变页码
+        changePage(current: number, pageSize: number){
+            this.currentPage = current
+            this.pageSize = pageSize
+            this.getLibraryList()
+        },
+
+        handleChange(){
+            this.getLibraryList()
+        },
+
+        //选择所有的图片
+        selectAllImg(){
+            if(this.selectImgListIds.length == this.imgList.length){
+                this.selectImgListIds = []
+                this.selectImgList = []
+            }else{
+                this.selectImgListIds = this.imgList.map((v:any) => v.id)
+                this.selectImgList = this.imgList
+            }
+        },
+
+        getLibraryList(){
+            let data = {
+                level1Type:this.selectCode,
+                level2Type:this.designType,
+                page:this.currentPage,
+                pictureName:this.searchPictureName,
+                size:this.pageSize,
+            }
+            this.isShowLoading = true
+            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
+                (rv: any) => {
+                    this.imgList = rv.content
+                    this.total = rv.total
+                    this.isShowLoading = false
+                }
+            ).catch((res)=>{
+                this.isShowLoading = false
+            });
+        },
+
+        confirmSelect(){
+            if(!this.selectImgList.length){
+                message.error('Please select at least one image')
+                return
+            }
+            this.$emit('confirmSelect',this.selectImgList)
+            this.closeModal()
+        },
+
+        closeModal(){
+            this.myMaterialModalShow = false
+            this.searchPictureName = ''
+            this.designType = null
+            this.selectImgList = []
+            this.selectImgListIds = []
+            this.imgList = []
+            this.currentPage = 1
+            this.pageSize = 10
+            this.total = 0
+        }
+    }
+})
+</script>
+<style lang="less">
+.my_material_modal{
+
+    .ant-modal-close{
+        width: 3.6rem;
+        height: 3.6rem;
+        position: absolute;
+        top: -1.8rem;
+        right: -1.8rem;
+    }
+
+    .ant-modal-header{
+        display: none;
+    }
+
+    .ant-modal-body{
+        background: #F2F3FB;
+        height: 80vh;
+        min-height: 72rem;
+        overflow-y: hidden;
+        padding: 0;
+    }
+
+    .my_material_header{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 6.6rem;
+        background: #F7F7F7;
+        padding: 0 3.4rem 0 3.1rem;
+
+        .my_material_title{
+            font-size: 1.8rem;
+            color: #030303;
+            font-weight: 500;
+        }
+
+        .my_material_header_right{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .content_search_block{
+                margin-right: 5rem;
+                display: flex;
+
+                .search_input{
+                    width: 30rem;
+                    padding-left: 1.5rem;
+                    height: 4rem;
+                    line-height: 3.8rem;
+                    background: #FFFFFF;
+                    border: 0.1rem solid #F1F1F1;
+                    font-size: 1.6rem;
+                    font-weight: 400;
+
+                    &::placeholder {
+                        color: #C2C2C2;
+                    }
+                }
+
+                .search_icon_block{
+                    width: 6rem;
+                    height: 4rem;
+                    line-height: 4rem;
+                    text-align: center;
+                    background: #343579;
+                    cursor: pointer;
+
+                    .icon-sousuo{
+                        font-size: 2rem;
+                        color: #FFFFFF;
+                    }
+                }
+            }
+
+            .icon_close{
+                color: rgba(174, 178, 183, 1);
+                font-size: 2.4rem;
+                cursor: pointer;
+            }
+        }
+
+        
+    }
+
+    .my_material_content{
+        padding: 0 3rem 3.5rem 3rem;
+        height: calc(100% - 6.6rem);
+        position: relative;
+
+        .material_content_top{
+            padding: 1.3rem 0 2.1rem;
+            height: 7rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+
+            .material_content_top_title{
+                font-size: 20px;
+                color: #030303;
+            }
+
+            .material_content_top_right{
+                display: flex;
+                align-items: center;
+
+                .select_block{
+                    background: #FFFFFF;
+                    color: #1A1A1A !important;
+                    margin-right: 2.3rem;
+
+                    .icon-xiala{
+                        color: #1A1A1A !important;
+                    }
+                }
+
+                .check_all_block{
+                    display: flex;
+                    align-items: center;
+                    font-size: 1.6rem;
+                    color: #64686D;
+                    cursor: pointer;
+
+                    &.check_all{
+                        color: #1A1A1A;
+                    }
+
+                    .check_block{
+                        width: 2.4rem;
+                        height: 2.4rem;
+                        background: #EBECF4;
+                        border: 0.1rem solid #64686D;
+                        padding: 0.3rem;
+                        margin-right: 0.7rem;
+
+                        .check_block_body{
+                            width: 100%;
+                            height: 100%;
+                            background: #343579;
+                        }
+                    }
+                }
+            }
+
+        }
+
+        .material_content_body{
+            width: 100%;
+            height: calc(100% - 19rem);
+            overflow-y: auto;
+            position: relative;
+
+            .content_img_item{
+                display: inline-block;
+                vertical-align: top;
+                padding: 0 1.4rem;
+                margin-bottom: 2.8rem;
+
+                .content_img_item_block{
+                    border: 0.1rem solid transparent;
+                    width: 16.5rem;
+                    height: 16.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: relative;
+                    cursor: pointer;
+
+                    &.select_item_img{
+                        border-color: #343579;
+                    }
+
+                    .print_content_img{
+                        width: 100%;
+                        height: 100%;
+                    }
+
+                    .content_img{
+                        max-width: 100%;
+                        max-height: 100%;
+                    }
+
+                }
+                .content_img_name{
+                    width: 16.5rem;
+                    height: 3.5rem;
+                    line-height: 3.5rem;
+                    white-space: nowrap;
+                    text-align: center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 1.4rem;
+                    color: #030303;
+                }
+            }
+
+            
+        }
+
+        .no_data_block{
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 99;
+
+            &.loading_block{
+                background: rgba(0,0,0,0.2);
+            }
+        }
+
+        .material_confirm{
+            width: 9.8rem;
+            height: 3.6rem;
+            line-height: 3.6rem;
+            font-size: 1.4rem;
+            text-align: center;
+            margin: 0 auto;
+            color: #FFFFFF;
+            background: #343579;
+            cursor: pointer;
+            margin-top: 2rem;
+        }
+
+        .table_pagination{
+            position: absolute;
+            bottom: 3.5rem;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            margin-top: 5rem;
+        }
+    }
+}
+</style>

src/component/HomePage/Header.vue

@@ -1,32 +1,75 @@
 <template>
     <div>
         <header class="header_component">
-            <img class="header_logo"  @click="turnToNewPage('https://www.aidlab.hk/en/')" src="@/assets/images/loginPage/aida_logo.png" />
-            <nav class="header_nav_content">
-                <div :class="['nav_item', $route.name === 'home'?'select_nav':'']" @click="turnToPage('home')">HOME</div>
-                <div  :class="['nav_item', $route.name === 'library'?'select_nav':'']" @click="turnToPage('library')">LIBRARY</div>
-                <div :class="['nav_item', $route.name === 'history'?'select_nav':'']" @click="turnToPage('history')">HISTORY</div>
-            </nav>
             <div class="header_right_content">
                 <div class="header_icon icon iconfont icon-touxiang3"></div>
                 <div class="header_user_content">
-                    <div class="username">{{userInfo?.userName}}</div>
+                    <div class="username">{{ userInfo?.userName }}</div>
-                    <div :class="['icon','iconfont', 'icon-xiala', isShowOperate?'icon_rotate':'']" @click.stop="changeShowOperateContent()"></div>
+                    <div
+                        :class="[
+                            'icon',
+                            'iconfont',
+                            'icon-xiala',
+                            isShowOperate ? 'icon_rotate' : '',
+                        ]"
+                        @click.stop="changeShowOperateContent()"
+                    ></div>
                     <nav class="select_block" v-show="isShowOperate">
                         <!-- <div class="select_item" @click="showBindEmailModal()">
                             <span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
                         </div> -->
                         <div class="select_item" @click="logout()">
-                            <span class="icon iconfont icon-tuichu"></span><span class="select_item_des">log off</span>
+                            <span class="icon iconfont icon-tuichu"></span
+                            ><span class="select_item_des">log off</span>
                         </div>
                     </nav>
                 </div>
             </div>
+            <nav class="header_nav_content">
+                <div
+                    :class="[
+                        'nav_item',
+                        $route.name === 'home' ? 'select_nav' : '',
+                    ]"
+                    @click="turnToPage('home')"
+                >
+                    HOME
+                </div>
+                <div
+                    :class="[
+                        'nav_item',
+                        $route.name === 'library' ? 'select_nav' : '',
+                    ]"
+                    @click="turnToPage('library')"
+                >
+                    LIBRARY
+                </div>
+                <div
+                    :class="[
+                        'nav_item',
+                        $route.name === 'history' ? 'select_nav' : '',
+                    ]"
+                    @click="turnToPage('history')"
+                >
+                    HISTORY
+                </div>
+            </nav>
+           
+			<div class="header_right">
+				<img
+                class="header_logo"
+                @click="turnToNewPage('https://www.aidlab.hk/en/')"
+                src="@/assets/images/loginPage/aida_logo.png"
+            />
+			<Habit></Habit>
+
+			</div>
         </header>
 
-        <a-modal class="modal_component" 
+        <a-modal
-            v-model:visible="bindEmailVisible" 
+            class="modal_component"
-            :footer="null" 
+            v-model:visible="bindEmailVisible"
+            :footer="null"
             title="Mailbox binding"
             width="56rem"
             :maskClosable="false"
@@ -37,284 +80,323 @@
             </template>
             <div class="bind_email_content" v-if="isHaveBindEmail">
                 <div class="bind_email_tip">you have binded email</div>
-                <div class="bind_email">{{userInfo.email}}</div>
+                <div class="bind_email">{{ userInfo.email }}</div>
             </div>
-            <div class="bind_email_content"  v-else>
+            <div class="bind_email_content" v-else>
                 <!-- 绑定邮箱第一步 start -->
                 <div v-show="bindEmailStep === 1">
                     <div class="bind_email_form_content">
                         <div class="bind_email_form_title">Email</div>
-                        <input class="bind_email_form_input" placeholder="Enter a new email" v-model="email" @keydown.enter="emailNextStepFun()">
+                        <input
+                            class="bind_email_form_input"
+                            placeholder="Enter a new email"
+                            v-model="email"
+                            @keydown.enter="emailNextStepFun()"
+                        />
+                    </div>
+                    <div
+                        class="bind_email_submit_button"
+                        @click="emailNextStepFun()"
+                    >
+                        Next step
                     </div>
-                    <div class="bind_email_submit_button"  @click="emailNextStepFun()">Next step</div>
                 </div>
                 <!-- 绑定邮箱第一步 end -->
 
                 <!-- 绑定邮箱第二步 start -->
                 <div v-show="bindEmailStep === 2">
                     <div @click="emailLastStepFun()">
-                        <span class="icon iconfont icon--shangyibu"></span><span class="email_last_step_content">Enter verification code</span>
+                        <span class="icon iconfont icon--shangyibu"></span
+                        ><span class="email_last_step_content"
+                            >Enter verification code</span
+                        >
                     </div>
                     <div class="email_last_step_des">
-                        <div class="sent_email_content">Sent to {{email}}</div>
+                        <div class="sent_email_content">
+                            Sent to {{ email }}
+                        </div>
                         <div class="tip_content">
-                            <span v-show="time">{{time}}s</span>
+                            <span v-show="time">{{ time }}s</span>
-                            <span v-show="!time"  @click="emailNextStepFun()">Resend</span>
+                            <span v-show="!time" @click="emailNextStepFun()"
+                                >Resend</span
+                            >
                         </div>
                     </div>
-					<VerificationCodeInput :ct="emailCode" @sendCaptcha="submitBindEmail($event)"></VerificationCodeInput>
+                    <VerificationCodeInput
+                        :ct="emailCode"
+                        @sendCaptcha="submitBindEmail($event)"
+                    ></VerificationCodeInput>
                 </div>
                 <!-- 绑定邮箱第一步 end -->
-                
             </div>
         </a-modal>
     </div>
-   
 </template>
 <script >
-import { defineComponent ,createVNode} from 'vue'
+import { defineComponent, createVNode } from "vue";
-import {isEmail} from '@/tool/util'
+import { isEmail } from "@/tool/util";
-import {setCookie, getCookie, WriteCookie} from '@/tool/cookie'
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
-import VerificationCodeInput from '@/component/LoginPage/verificationCodeInput.vue'
+import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+import Habit from "@/component/Detail/habit.vue";
 import { Https } from "@/tool/https";
-import { Modal,message } from 'ant-design-vue';
+import { Modal, message } from "ant-design-vue";
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 export default defineComponent({
-    components:{
+    components: {
-		VerificationCodeInput,
+        VerificationCodeInput,
-	},
+		Habit,
-    data(){
+    },
-        return{
+    data() {
-            isShowOperate:false,
+        return {
-            bindEmailVisible:false,
+            isShowOperate: false,
-            isHaveBindEmail:false,
+            bindEmailVisible: false,
-            bindEmailStep:1,
+            isHaveBindEmail: false,
-            email:'',
+            bindEmailStep: 1,
-            emailCode:['','','','','',''],//邮箱验证码
+            email: "",
-            time:60,//60秒倒计时
+            emailCode: ["", "", "", "", "", ""], //邮箱验证码
+            time: 60, //60秒倒计时
             timer: 0,
-            userInfo:{},
+            userInfo: {},
-            timerOperate:null,
+            timerOperate: null,
-            numTime:30,
+            numTime: 30,
-            timerSec:null,
+            timerSec: null,
-            modalWarning:null
+            modalWarning: null,
-        }
+        };
     },
-    mounted(){
+    mounted() {
-        this.userInfo = JSON.parse(getCookie('userInfo'))
+        this.userInfo = JSON.parse(getCookie("userInfo"));
-        if(!this.userInfo){
+        if (!this.userInfo) {
-            this.$router.replace('/login')
+            this.$router.replace("/login");
-        }else{
+        } else {
-            this.accountIsLogin(this.userInfo)
+            this.accountIsLogin(this.userInfo);
         }
-        this.isHaveBindEmail = this.userInfo?.email ? true : false
+        this.isHaveBindEmail = this.userInfo?.email ? true : false;
 
-        this.operateClick()
+        this.operateClick();
-        document.addEventListener('click',this.operateClick)
+        document.addEventListener("click", this.operateClick);
     },
-    methods:{
+    methods: {
-        turnToNewPage(url){
+        turnToNewPage(url) {
-            window.open(url)
+            window.open(url);
         },
 
-        turnToPage(name){
+        turnToPage(name) {
-            let noRefresh = name === 'home' ? true :false
+            let noRefresh = name === "home" ? true : false;
-            this.$router.push({name:name,params: {noRefresh:noRefresh}})
+            this.$router.push({ name: name, params: { noRefresh: noRefresh } });
         },
 
         //点击下拉图标出现操作
-        changeShowOperateContent(){
+        changeShowOperateContent() {
-            this.isShowOperate = !this.isShowOperate
+            this.isShowOperate = !this.isShowOperate;
-            document.addEventListener('click',this.closeShowOperateContent,false)
+            document.addEventListener(
+                "click",
+                this.closeShowOperateContent,
+                false
+            );
         },
 
         //关闭下拉图标
-        closeShowOperateContent(){
+        closeShowOperateContent() {
-          this.isShowOperate = false
+            this.isShowOperate = false;
-          document.removeEventListener('click',this.closeShowOperateContent)
+            document.removeEventListener("click", this.closeShowOperateContent);
         },
 
         //打开绑定邮箱弹窗
-        showBindEmailModal(){
+        showBindEmailModal() {
-            this.bindEmailVisible = true
+            this.bindEmailVisible = true;
         },
 
-        emailNextStepFun(){
+        emailNextStepFun() {
-            if(!isEmail(this.email)){
+            if (!isEmail(this.email)) {
-                message.error('The email format is incorrect');
+                message.error("The email format is incorrect");
-                return
+                return;
             }
             let data = {
-                email:this.email,
+                email: this.email,
                 operationType: "BIND_MAILBOX",
-            }
+            };
-            const hide = message.loading('loading', 0);
+            const hide = message.loading("loading", 0);
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv) =>{
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data)
-                if(rv){
+                .then((rv) => {
-                    this.bindEmailStep = 2
+                    if (rv) {
-                    this.emailCode = ['','','','','',''],
+                        this.bindEmailStep = 2;
-                    this.createTimer()
+                        (this.emailCode = ["", "", "", "", "", ""]),
-                    hide()
+                            this.createTimer();
-                    message.success('Succeeded in binding the mailbox.')
+                        hide();
-                }
+                        message.success("Succeeded in binding the mailbox.");
-            }).catch(res=>{
+                    }
-                 hide()
+                })
-            })
+                .catch((res) => {
+                    hide();
+                });
         },
 
         //绑定邮箱的上一步
-        emailLastStepFun(){
+        emailLastStepFun() {
-            this.bindEmailStep = 1
+            this.bindEmailStep = 1;
-            this.email = ''
+            this.email = "";
-            this.emailCode = ['','','','','',''],
+            (this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
-            this.clearTimer()
         },
 
         //创建定时器
-        createTimer(){
+        createTimer() {
-            this.timer = setInterval(()=>{
+            this.timer = setInterval(() => {
-                this.time--
+                this.time--;
-                if(!this.time){
+                if (!this.time) {
-                clearInterval(this.timer)
+                    clearInterval(this.timer);
                 }
-            },1000)
+            }, 1000);
         },
 
         //清除定时器
-        clearTimer(){
+        clearTimer() {
-            this.time = 60
+            this.time = 60;
-            if(this.timer){
+            if (this.timer) {
-                clearInterval(this.timer)
+                clearInterval(this.timer);
             }
         },
 
         //登出
-        logout(){
+        logout() {
             let data = {
-                userId:this.userInfo.userId
+                userId: this.userInfo.userId,
-            }
+            };
-            Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) =>{
+            Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
-                this.$router.replace('/login')
+                this.$router.replace("/login");
-                WriteCookie('token')
+                WriteCookie("token");
-            })
+            });
         },
 
         //绑定邮箱
-        submitBindEmail(emailVerifyCode){
+        submitBindEmail(emailVerifyCode) {
-             let data = {
+            let data = {
-                userEmail:this.email,
+                userEmail: this.email,
                 userId: this.userInfo.userId,
-                emailVerifyCode:emailVerifyCode
+                emailVerifyCode: emailVerifyCode,
-            }
+            };
-            Https.axiosPost(Https.httpUrls.accountBindEmail, data).then((rv) =>{
+            Https.axiosPost(Https.httpUrls.accountBindEmail, data).then(
-                if(rv){
+                (rv) => {
-                    this.userInfo.email = this.email
+                    if (rv) {
-                    setCookie('userInfo',JSON.stringify(this.userInfo))
+                        this.userInfo.email = this.email;
-                    this.bindEmailVisible = false,
+                        setCookie("userInfo", JSON.stringify(this.userInfo));
-                    this.bindEmailStep = 1
+                        (this.bindEmailVisible = false),
-                    this.clearTimer()
+                            (this.bindEmailStep = 1);
-                    this.emailCode = ['','','','','','']
+                        this.clearTimer();
+                        this.emailCode = ["", "", "", "", "", ""];
+                    }
                 }
-            })
+            );
         },
 
         //判断是否登录
-        accountIsLogin(userInfo){
+        accountIsLogin(userInfo) {
-            let data ={
+            let data = {
-                userId:userInfo.userId
+                userId: userInfo.userId,
-            }
+            };
-             Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) =>{
+            Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) => {
-                if(!rv){
+                if (!rv) {
-                    this.$router.replace('/login')
+                    this.$router.replace("/login");
                 }
-            })
+            });
         },
 
         //点击重置判断是否长时间五操作
-        operateClick(){
+        operateClick() {
-            if(this.timer){
+            if (this.timer) {
-                clearTimeout(this.timer)
+                clearTimeout(this.timer);
             }
-            let _this = this
+            let _this = this;
-            let timeNum = 1000 * 60 *120
+            let timeNum = 1000 * 60 * 120;
-            this.timer = setTimeout(()=>{
+            this.timer = setTimeout(() => {
-                this.modalWarning =  Modal.warning ({
+                this.modalWarning = Modal.warning({
-                    title: () => `You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
+                    title: () =>
+                        `You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
                     icon: createVNode(ExclamationCircleOutlined),
-                    okText: 'Ok',
+                    okText: "Ok",
                     onOk() {
-                       _this.numTime = 30
+                        _this.numTime = 30;
-                       clearInterval(_this.timerSec)
+                        clearInterval(_this.timerSec);
-                    }
+                    },
                 });
-                _this.numCounter()
+                _this.numCounter();
-            },timeNum)
+            }, timeNum);
         },
 
-        numCounter(){
+        numCounter() {
-            this.timerSec = setInterval(()=>{
+            this.timerSec = setInterval(() => {
-                if(this.numTime > 0){
+                if (this.numTime > 0) {
-                    this.numTime = this.numTime - 1
+                    this.numTime = this.numTime - 1;
-                }else{
+                } else {
-                    clearTimeout(this.timer)
+                    clearTimeout(this.timer);
-                    clearInterval(this.timerSec)
+                    clearInterval(this.timerSec);
-                    this.logout()
+                    this.logout();
-                    this.modalWarning.destroy()
+                    this.modalWarning.destroy();
                 }
-            },1000)
+            }, 1000);
-        }
+        },
-    }
+    },
-})
+});
 </script>
 <style lang="less" scoped>
-.header_component{
+.header_component {
     display: flex;
+	justify-content: space-between;
+	padding: 0 30px;
     width: 100%;
     height: 7rem;
     background: rgba(255, 255, 255, 0.2);
-    border-bottom: 0.1rem solid rgba(3,3,3,0.1);
+    border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
     position: relative;
-
+    align-items: center;
-    .header_logo{
+	.header_right{
+		display: flex;
+		align-items: center;
+	}
+    .header_logo {
         width: 14.4rem;
         height: 3.2rem;
-        margin: 2.1rem 0 0 2.8rem;
+        margin: 2.1rem 2.8rem 0 ;
+		// position: absolute;
+		margin-top: 0;
     }
 
-    .header_nav_content{
+    .header_nav_content {
         display: flex;
-        margin-left: 28.9rem;
+        // margin-left: 28.9rem;
+		// margin-left: 46.2rem;
         align-items: center;
 
-        .nav_item{
+        .nav_item {
             padding: 1.1rem 1rem;
             border-bottom: 0.1rem solid transparent;
             margin-right: 3.4rem;
             font-size: 1.6rem;
             line-height: 1.3rem;
-            color: #333333;
+            // color: #333333;
+            color: #000;
             cursor: pointer;
-            font-weight: 500;
+            font-weight: 900;
 
-            &.select_nav{
+            &.select_nav {
-                background: #E6E6F6;
+                background: #e6e6f6;
             }
         }
     }
 
-    .header_right_content{
+    .header_right_content {
-        position: absolute;
+        // position: absolute;
         top: 0;
-        right: 3.2rem;
+        // right: 3.2rem;
+		left: 0;
         display: flex;
-
+		width: 33%;
-        .header_icon{
+        .header_icon {
             font-size: 3.6rem;
             position: relative;
             top: 0.3rem;
         }
 
-        .header_user_content{
+        .header_user_content {
             margin-left: 1rem;
             display: flex;
             align-items: center;
@@ -322,53 +404,53 @@ export default defineComponent({
             top: 1.2rem;
             height: 3.7rem;
 
-            .username{
+            .username {
                 font-size: 1.6rem;
-                color: #1A1A1A;
+                color: #1a1a1a;
                 margin-right: 0.8rem;
             }
 
-            .icon-xiala{
+            .icon-xiala {
                 font-size: 1.4rem;
                 cursor: pointer;
             }
 
-            .icon_rotate{
+            .icon_rotate {
-                -moz-transform:rotate(180deg);
+                -moz-transform: rotate(180deg);
-                -webkit-transform:rotate(180deg);
+                -webkit-transform: rotate(180deg);
                 transform: rotate(180deg);
                 animation-direction: 0.5s;
             }
 
-            .select_block{
+            .select_block {
                 position: absolute;
                 right: -1.5rem;
                 top: 3.7rem;
                 width: 11.4rem;
-                background: #FFFFFF;
+                background: #ffffff;
-                box-shadow: 0px 0.4rem 0.4rem 0px rgba(0,0,0,0.1);
+                box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
                 z-index: 9;
                 overflow: hidden;
                 border: 1px solid #000000;
 
-                .select_item{
+                .select_item {
                     padding-left: 1.5rem;
                     height: 4.1rem;
-                    color: #4D4D4D;
+                    color: #4d4d4d;
                     display: flex;
                     align-items: center;
                     cursor: pointer;
-                    user-select:none;
+                    user-select: none;
 
-                    &:hover{
+                    &:hover {
-                        background: #F7F7F7;
+                        background: #f7f7f7;
                     }
 
-                    .iconfont{
+                    .iconfont {
                         font-size: 1.4rem;
                     }
 
-                    .select_item_des{
+                    .select_item_des {
                         font-size: 1.3rem;
                         margin-left: 0.8rem;
                     }
@@ -376,32 +458,32 @@ export default defineComponent({
             }
         }
     }
+    
 }
-.modal_component{
+.modal_component {
-
+    .skip_content {
-    .skip_content{
         width: 6rem;
         height: 3rem;
         line-height: 2.8rem;
         border: 0.1rem solid #343579;
         font-size: 1.4rem;
-        color: #343579;    
+        color: #343579;
         position: absolute;
         top: 1.8rem;
         right: 1.8rem;
         cursor: pointer;
     }
-    
+
-    .bind_email_content{
+    .bind_email_content {
         padding: 4.8rem 9.2rem 6rem;
 
-        .bind_email_tip{
+        .bind_email_tip {
             font-size: 1.8rem;
-            color: #A5B0C2;
+            color: #a5b0c2;
             line-height: 1.9rem;
             text-align: center;
         }
-        .bind_email{
+        .bind_email {
             margin-top: 2rem;
             font-size: 2.2rem;
             font-weight: 400;
@@ -409,51 +491,50 @@ export default defineComponent({
             text-align: center;
         }
 
-        .bind_email_form_content{
+        .bind_email_form_content {
-
+            .bind_email_form_title {
-            .bind_email_form_title{
                 font-size: 2.2rem;
                 font-weight: bold;
                 color: #030303;
                 line-height: 2.4rem;
             }
 
-            .bind_email_form_input{
+            .bind_email_form_input {
                 width: 100%;
                 height: 4.6rem;
                 margin-top: 1rem;
-                border: 0.1rem solid #B4BED7;
+                border: 0.1rem solid #b4bed7;
                 padding-left: 2.1rem;
                 line-height: 4.6rem;
                 font-size: 1.8rem;
                 box-sizing: border-box;
 
                 &::placeholder {
-                    color:#A5B0C2,
+                    color: #a5b0c2;
                 }
             }
         }
 
-        .bind_email_submit_button{
+        .bind_email_submit_button {
             height: 4.6rem;
             line-height: 4.6rem;
             background: #343579;
             font-size: 1.6rem;
             font-weight: 500;
-            color: #FFFFFF;
+            color: #ffffff;
             width: 12.8rem;
             text-align: center;
             cursor: pointer;
             margin: 3rem auto 0;
         }
 
-        .icon--shangyibu{
+        .icon--shangyibu {
             font-size: 2.5rem;
             font-weight: bold;
             color: #030303;
         }
 
-        .email_last_step_content{
+        .email_last_step_content {
             margin-left: 1rem;
             font-size: 2.2rem;
             font-family: PingFang SC;
@@ -461,24 +542,24 @@ export default defineComponent({
             color: #030303;
         }
 
-        .tip_content{
+        .tip_content {
             font-size: 1.3rem;
             font-weight: bold;
             color: #343579;
             cursor: pointer;
         }
 
-        .email_last_step_des{
+        .email_last_step_des {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-top: 2.5rem;
             margin-bottom: 1.5rem;
 
-            .sent_email_content{
+            .sent_email_content {
                 font-size: 1.8rem;
                 font-weight: bold;
-                color: #A5B0C2;
+                color: #a5b0c2;
             }
         }
     }

src/component/HomePage/MoodboardUpload.vue

@@ -6,6 +6,9 @@
             </div>
              <div @click="openLibrary()" class="switch_type_item">
                 <span>My Library</span>
+            </div>
+			<div @click="openLibrary()" class="switch_type_item">
+                <span>Generate</span>
             </div>
             <div class="design_template_button" @click.stop="changeTemplateModal()" v-show="fileList.length>2">Design</div>
         </div>

src/component/HomePage/RobotAssist.vue

@@ -0,0 +1,363 @@
+<template>
+	<div class="robot" @click="robotmax">
+		<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
+			<div :class="[item.state == 1?'text_right':'text_left']" v-for="item in dialogue" ref="robotChildDom">
+				<div class="robot_text">{{item.str}}</div>
+			</div>
+		</div>
+		<div class="robot_bottom">
+			<div class="robot_input" v-fade="robotInput,'flex'">
+				<input
+					placeholder="write a message~"
+					v-model="chatCentent"
+					@keydown.enter="roborSend()"
+					@input="robotmax"
+				/>
+				<div class="robot_btn">
+					<i class="fi fi-ss-paper-plane-top" @click="roborSend"></i>
+				</div>
+			</div>
+			<div class="robot_img">
+				<img src="@/assets/images/homePage/robot.png" @click="robotBtn">
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent, createVNode, ref,Ref} from "vue";
+import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
+import { Https } from "@/tool/https";
+import { getCookie } from "@/tool/cookie";
+import axios from 'axios'
+
+import { message } from "ant-design-vue";
+export default defineComponent({
+    components: {
+        DownOutlined,
+        UserOutlined,
+    },
+	setup() {
+		const robotDom = ref<HTMLElement | null>(null);
+		const robotChildDom = ref<HTMLElement | null>(null);
+		let chatCentent = ref<string>('');
+		const robotTop = ref(false)
+		const robotInput = ref(false)
+        let timeTop:any =  0;
+        let timeInput:any =  0;
+		let dialogue:any = ref([
+			{
+				state:1,
+				str:"2222222 22222222 222"
+			},
+			{
+				state:2,
+				str:"2222 22222 22 2222 22"
+			},
+			{
+				state:1,
+				str:"222 22222 222 2222 222"
+			},
+		])
+		const userInfo:any =  {}
+		
+		return {
+		robotTop,
+		robotInput,
+		chatCentent,
+		dialogue,
+		robotDom,
+		robotChildDom,
+		timeTop,
+		timeInput,
+		userInfo,
+		};
+	},
+    data() {
+        return {
+        };
+    },
+    mounted() {
+		this.textScroll()
+		let userInfo:any = getCookie("userInfo")
+        this.userInfo = JSON.parse(userInfo);
+console.log(22);
+
+const data = {
+                "user_id": "83",
+                "session_id": "",
+                "message": "Hello, can you tell me what holiday is on July 1st",
+            };
+			
+		    axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
+					// console.log(11);
+                  //     num = progressEvent.event.currentTarget.response
+			  		console.log(progressEvent);
+
+                    },
+                }).then((res)=>{
+					console.log(res);
+				}).catch((response) => {
+                    console.log(response);
+                    // var res = http.responseText
+                });
+	},
+	directives:{
+		fade:{
+			updated (el,oldVal){
+				if(oldVal.value){
+					el.style.display = oldVal.arg
+					setTimeout(() => {
+						el.classList.add("active")
+					}, 100);
+				}else{
+					el.classList.remove("active")
+					setTimeout(() => {
+					el.style.display="none"
+					}, 100);
+				}
+			}
+		}
+	},
+    methods: {
+		robotBtn(){
+			if(!this.robotTop||!this.robotInput){
+				this.robotTop = true
+				this.robotInput = true
+				
+			}else{
+				this.robotTop = false
+				this.robotInput = false
+			}
+			this.textScroll()//聊天定位到最低部
+			this.createTimer()
+		},
+		textScroll(){
+			
+			
+			this.$nextTick(()=>{
+				if(this.robotDom && this.robotChildDom){
+				// const items = this.robotChildDom._rawValue
+				let num = 0
+				for (let index = 0; index < (this.$refs.robotChildDom as any).length; index++) {
+					const height = (this.$refs.robotChildDom as any)[index].clientHeight;
+					num = num+40+height
+				}
+				this.robotDom.scrollTop = num
+			}
+			})
+			
+		},
+		robotmax(){//点击内容就设置为true显示 重置定时器
+			this.createTimer()
+		},
+		roborSend (){
+			this.createTimer()
+			if(!this.chatCentent){
+                message.error("Please enter content");
+				return
+			}
+			this.dialogue.push({
+				state:2,
+				str:this.chatCentent
+			})
+			let a = true
+			let data = {
+				"user_id" : this.userInfo.userId,
+				// "message" : this.chatCentent,
+				"message" : "Hello, can you tell me what holiday is on July 1st",
+				
+				"session_id":""
+			}
+			console.log(getCookie('token'));
+			
+			let interaction = {onDownloadProgress: (progressEvent:any) => {
+					this.clearTimer()
+					console.log(progressEvent);
+					
+				  if(a){
+					this.dialogue.push({
+						state:1,
+						// str:progressEvent.event.currentTarget.response
+					})
+					a = false
+				  }else{
+					this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
+				  }
+                },
+            }
+			// Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
+            //     (rv: any) => {
+			// 		a = true
+			// 		this.createTimer()
+            //     }
+            // ).catch(res=>{
+			// 	this.createTimer()
+            // });
+
+			// new Promise((resolve, reject) => {
+
+				axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
+					// console.log(11);
+                  //     num = progressEvent.event.currentTarget.response
+			  		console.log(progressEvent);
+
+                    },
+                }).then((res)=>{
+					console.log(res);
+				}).catch((response) => {
+                    console.log(response);
+                    // var res = http.responseText
+                });
+			
+            // axios.post("/api/python/chatStream", data,{
+			// 	onDownloadProgress: (progressEvent:any) => {
+			// 		// this.clearTimer()
+			// 		console.log(progressEvent);
+					
+			// 	//   if(a){
+			// 	// 	this.dialogue.push({
+			// 	// 		state:1,
+			// 	// 		// str:progressEvent.event.currentTarget.response
+			// 	// 	})
+			// 	// 	a = false
+			// 	//   }else{
+			// 	// 	this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
+			// 	//   }
+            //     },
+			// 	}).then(response => {
+            //         // resolve(response)
+			// 		console.log(response);
+
+            //     }).catch((error) => {
+			// 		console.log(error);
+					
+			// 	})
+
+        // }); 
+		
+			this.chatCentent = ""
+			this.textScroll()
+
+		},
+		//创建定时器
+        createTimer() {
+			if (this.robotTop || this.robotInput) {
+				this.clearTimer()
+				this.timeTop = setInterval(() => {
+					this.robotTop = false
+				}, 10000);
+				this.timeInput = setInterval(() => {
+					this.robotInput = false
+				}, 5000);
+
+			}
+           
+        },
+
+        //清除定时器
+        clearTimer() {
+			
+			clearInterval(this.timeTop);
+			clearInterval(this.timeInput);
+        },
+    },
+});
+</script>
+<style lang="less" scoped>
+.robot{
+	position: absolute;
+	bottom: 25px;
+	right: 50px;
+	z-index: 9999;
+	// width: 400px;
+	.robot_top{
+		// width: 70%;
+		width: 250px;
+		margin-left: auto;
+		height: 140px;
+		overflow-x: hidden;
+		transition: .3s all;
+		opacity: 0;
+		display: none;
+		&.active{
+			opacity: 1;
+		}
+		&.robot_top::-webkit-scrollbar{display: none;}
+		.robot_text{
+			font-size: 14px;
+			padding: 5px 10px;
+			display: inline-block;
+			border-radius: 20px;
+			max-width: 80%;
+		}
+		.text_left,.text_right{
+			margin: 20px 0;
+			font-size: 12px;
+		}
+		.text_left{
+			display: flex;
+			justify-content: flex-start;
+			>div{
+				background-color: #e8e8ea;
+				color: #000;
+			}
+		}
+		.text_right{
+			display: flex;
+			justify-content: flex-end;
+			>div{
+				background-color: #835ff7;
+				color: #fff;
+			}
+		}
+	}
+	.robot_bottom{
+		display: flex;
+		align-items: center;
+	}
+	.robot_input{
+		border: 1px solid #d5d5d7;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 5px 10px;
+		background: #fff;
+		border-radius: 5px;
+		// height: 32px;
+		transition: .3s all;
+		opacity: 0;
+		display: none;
+		margin-right: 40px;
+		&.active{
+			opacity: 1;
+		}
+		input{
+			border: none;
+			font-size: 12px;
+			width: 250px;
+		}
+		.robot_btn{
+			display: flex;
+			height: 100%;
+			cursor: pointer;
+		}
+		.fi-ss-paper-plane-top{
+			display: flex;
+			align-items: center;
+		}
+		.fi-ss-paper-plane-top::before{
+			color: #835df8;
+		}
+	}
+	.robot_img{
+		    margin-left: auto;
+		img{
+			width: 100px;
+			width: 80px;
+			// margin-left: 40px;
+			cursor: pointer;
+
+		}
+	}
+}
+</style>

src/component/HomePage/collectionModal.vue

@@ -8,10 +8,10 @@
             :centered="true"
         >
             <template #title>
-                <div v-show="collectionStep === 1">Moodboard Upload</div>
+                <div v-show="collectionStep === 1">Moodboard</div>
-                <div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard Upload</div>
+                <div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard</div>
-                <div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard Upload</div>
+                <div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard</div>
-                <div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard Upload</div>
+                <div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard</div>
                 <div v-show="collectionStep === 5"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Markets Sketch</div>
             </template>
             <template #closeIcon>

src/main.ts

@@ -9,8 +9,13 @@ import 'ant-design-vue/dist/antd.css';
 import Antd from 'ant-design-vue';
 import './assets/style/style.less'
 import VueLazyload from "vue-lazyload";
+import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
 flexible()
 
+// console.log(process.env)
+
+
+
 let loadingParam =  {
     loading: require('./assets/images/homePage/loading.gif'),
     attempt: 1

src/store/index.ts

@@ -2,6 +2,7 @@ import { createStore } from 'vuex'
 import UploadFilesModule from './uploadFile/uploadFile'
 import DesignDetailModule from './Detail/designDetail'
 import HomeStoreModule  from './homeStore/homeStore'
+import UserHabit  from './userHabit/userHabit'
 export interface RootState{
 
 }
@@ -18,6 +19,7 @@ export default createStore<RootState>({
   modules: {
     UploadFilesModule,
     DesignDetailModule,
-    HomeStoreModule
+    HomeStoreModule,
+	UserHabit
   }
 })

src/store/userHabit/userHabit.ts

@@ -0,0 +1,48 @@
+import {Module} from 'vuex'
+import {RootState} from '../index'
+import { Https } from "@/tool/https";
+interface DesignDetail{
+    clothingType:any,
+    // devise:any,
+    // deviseType:any,
+    // system_per:any,
+    // model:any,
+    
+}
+
+const HomeStoreModule : Module<DesignDetail,RootState> = {
+    state:{
+        clothingType:[],
+		
+        
+    },
+    mutations:{
+        res_clothingType(state,data){
+            state.clothingType = data
+			console.log(data);
+			
+        },
+    },
+
+    actions:{
+		get_clothingType(context){
+			var arr = [{
+				id:11,
+				name:"nv"
+			},{
+				id:22,
+				name:"nan",
+			}]
+			context.commit('res_clothingType',arr)
+
+			// Https.axiosGet(url)
+			// 	.then((rv: any) => {
+			// 		context.commit('res_clothingType',rv)
+			// 	})
+			// 	.catch((rv) => {
+			// 	});
+		}
+    }
+}
+
+export default HomeStoreModule

src/tool/https.js

@@ -7,10 +7,19 @@ import {getCookie} from '@/tool/cookie'
 // import cookie from '@/tools/cookie.js'
 
 axios.defaults.timeout = 60000;                        //响应时间
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
+axios.defaults.headers.post["Content-Type"] = "application/json";
+
+
+axios.defaults.headers.post['lang'] = 'en';        //配置语言请求头
 axios.defaults.withCredentials = true;  //跨域携带cookie
 import { message } from 'ant-design-vue';
-axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
+
+if(process.env.NODE_ENV == "development"){
+	axios.defaults.baseURL = "";   //配置接口地址
+}else{
+	axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
+}
 
 //POST传参序列化(添加请求拦截器)
 axios.interceptors.request.use((config) => {
@@ -89,6 +98,7 @@ export const Https = {
         deleteHighDesign:'/api/design/detail/deleteHighDesign',//删除高级design图片
         saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
         libraryModelsDot:'/api/library/modelsDot',//Models打点预览
+        pythonChatStream:'/api/python/chatStream',//机器人助力
      
     },
 

src/views/LoginPage.vue

@@ -7,115 +7,141 @@
             />
             <!-- 账号密码和邮箱登录  start-->
             <div class="login_content" v-if="isLogin === 1">
-                <div class="login_type_list">
+				<div class="login_content_left">
-                    <div
+					<div class="login_type_list">
-                        :class="[
+						<div
-                            'login_type_item','username_login_item',
+							:class="[
-                            'login_active',
+								'login_type_item','username_login_item',
-                        ]"
+								'login_active',
-                    >
+							]"
-                        Log on to AiDA
+						>
-                    </div>
+							Log on to AiDA
-                </div>
+						</div>
-                <!-- 账号密码登录 start -->
+					</div>
-                <div v-show="loginType == 'username'">
+					<!-- 账号密码登录 start -->
-                    <div class="login_form_content">
+					<!-- v-show="loginType == 'username'" -->
-                        <div class="login_form_title">Username</div>
+					<div >
-                        <input
+						<div class="login_form_content" :state="emailStap">
-                            class="login_form_input"
+								<div class="login_form_title">Name</div>
-                            placeholder="Enter your username"
+							<input
-                            v-model="username"
+								class="login_form_input"
-                        />
+								placeholder="Enter your username"
-                        <div class="login_form_title marign_top30">
+								v-model="username"
-                            <div>Password</div>
+							/>
-                            <!-- <div class="tip_content" @click="changeIsLogin(2)">
+							
-                                Forgot password？
+							<div class="login_form_title marign_top30">
-                            </div> -->
+								<div>Password</div>
-                        </div>
+								<!-- <div class="tip_content" @click="changeIsLogin(2)">
-                        <div class="password_input_block">
+									Forgot password？
-                            <input
+								</div> -->
-                                class="login_form_input"
+							</div>
-                                :type="passwordType"
+							<div class="password_input_block">
-                                placeholder="Enter your password"
+								<input
-                                v-model="password"
+									class="login_form_input"
-                                @keydown.enter="submitPerLogin()"
+									:type="passwordType"
-                            />
+									placeholder="Enter your password"
-                            <div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
+									v-model="password"
-                        </div>
+									@keydown.enter="submitPerLogin()"
-                        
+								/>
-                    </div>
+								<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
-                    <div
+							</div>
-                        class="login_submit_button marign_top40"
+							<div class="login_form_title marign_top30">Email</div>
-                        @click="submitPerLogin()"
+							<input
-                    >
+								class="login_form_input"
-                        Continue
+								placeholder="Enter your email address"
-                    </div>
+								v-model="email"
-                    
+								@keydown.enter="emailNextStepFun()"
-                    <div class="login_text"  >
+							/>
-                        <div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
-                    </div>
 
-                </div>
+						<!-- 邮箱登录 start -->
-                <!-- 账号密码登录 end -->
+							<div class="login_form_email" :class="{active:emailStap===2}">
+					<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
+						<!-- <div v-show="emailStap === 1" class="forget_password_content">
+							<div class="forget_password_content_block" @click="changeLoginType('username')">
+								<span class="icon iconfont icon--shangyibu"></span
+								><span class="forget_password_content_title"
+									>Log on to AiDA</span
+								>
+							</div>
+							<div class="login_form_content">
+								<div class="login_form_title">Email</div>
+								<input
+									class="login_form_input"
+									placeholder="Enter your email address"
+									v-model="email"
+									@keydown.enter="emailNextStepFun()"
+								/>
+							</div>
+							<div
+								class="login_submit_button marign_top40"
+								@click="emailNextStepFun()"
+							>
+								Sign In
+							</div>
+						</div> -->
 
-                <!-- 邮箱登录 start -->
+						<div v-show="emailStap === 2"  class="email_last_step">
-                <div v-show="loginType == 'email'">
+							
-                    <div v-show="emailStap === 1" class="forget_password_content">
+							<div class="email_last_step_block" >
-                        <div class="forget_password_content_block" @click="changeLoginType('username')">
+								<span class="email_last_step_content"
-                            <span class="icon iconfont icon--shangyibu"></span
+									>Verify with one-time verification code</span
-                            ><span class="forget_password_content_title"
+								>
-                                >Log on to AiDA</span
+								<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
-                            >
+							</div>
-                        </div>
+							<div class="email_last_step_bottom">
-                        <div class="login_form_content">
+								<div class="email_last_step_des">
-                            <div class="login_form_title">Email</div>
+								<div class="sent_email_content">
-                            <input
+									Sent to {{ email }}
-                                class="login_form_input"
+								</div>
-                                placeholder="Enter your email address"
+								<div class="tip_content">
-                                v-model="email"
+									<span v-show="time">{{ time }}s</span>
-                                @keydown.enter="emailNextStepFun()"
+									<span v-show="!time" @click="emailNextStepFun()"
-                            />
+										>Resend</span
-                        </div>
+									>
-                        <div
+								</div>
-                            class="login_submit_button marign_top40"
+							</div>
-                            @click="emailNextStepFun()"
+							<VerificationCodeInput
-                        >
+								:ct="emailCode"
-                            Continue
+								@sendCaptcha="submitEmailLogin($event)"
-                        </div>
+							></VerificationCodeInput>
-                    </div>
 
-                    <div v-show="emailStap === 2" class="email_last_step">
+							<div class="email_last_step_des">
-                        
+								<div class="sent_email_content email_tip_content">
-                        <div class="email_last_step_block" @click="emailLastStepFun()">
+								Please check the junk box if you haven't received verification code
-                            <span class="icon iconfont icon--shangyibu"></span
+								</div>
-                            ><span class="email_last_step_content"
+							</div>
-                                >Verify with one-time verification code</span
+							</div>
-                            >
+						</div>
-                        </div>
+					</div>
-                        <div class="email_last_step_des">
+						</div>
-                            <div class="sent_email_content">
-                                Sent to {{ email }}
-                            </div>
-                            <div class="tip_content">
-                                <span v-show="time">{{ time }}s</span>
-                                <span v-show="!time" @click="emailNextStepFun()"
-                                    >Resend</span
-                                >
-                            </div>
-                        </div>
-                        <VerificationCodeInput
-                            :ct="emailCode"
-                            @sendCaptcha="submitEmailLogin($event)"
-                        ></VerificationCodeInput>
 
-                        <div class="email_last_step_des">
+						<div  class="login_form_title marign_top30">
-                            <div class="sent_email_content email_tip_content">
+							<label>
-                               Please check the junk box if you haven't received verification code
+							<input type="checkbox" v-model="checked">
-                            </div>
+							<span>I agree to all Term, Privacy Policy and Fees</span>
-                        </div>
+						</label>
-                    </div>
+						</div>
-                </div>
+						
+						<div
+							class="login_submit_button marign_top40" :state="emailStap"
+							@click="submitPerLogin()"
+						>
+						Sign In
+						</div>
+						
+						<div class="login_text"  >
+							<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
+						</div>
+
+					</div>
+					<!-- 账号密码登录 end -->
+					
+				</div>
+                
                 <!-- 邮箱登录 end -->
+				<div class="login_content_right">
+					<img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt="">
+				</div>
             </div>
 
             <!-- 忘记密码 start -->
@@ -199,7 +225,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent,ref ,onMounted} from "vue";
 import { Https } from "@/tool/https";
 import { isEmail } from "@/tool/util";
 import { setCookie } from "@/tool/cookie";
@@ -207,19 +233,21 @@ import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
 
 const md5 = require("md5");
-
 export default defineComponent({
     components: {
         VerificationCodeInput,
     },
     setup(){
-        let timer:any =  0
+        let timer:any =  0;
+	
         return{
             timer
         }
     },
+
     data() {
         return {
+			checked:false,
             isLogin: 1, //是否为登录 1-登录， 2-忘记密码
             loginType: "username",
             emailStap: 1, // 邮箱登录步骤
@@ -285,7 +313,11 @@ export default defineComponent({
         //邮箱登录的上一步
         emailLastStepFun() {
             this.emailStap = 1;
+			this.username = "",
+            this.password = "",
             this.email = "";
+			this.checked=false,
+			this.loginType = "username",
             (this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
         },
 
@@ -309,7 +341,6 @@ export default defineComponent({
                 }
             );
         },
-
         //忘记密码的上一步
         forgetPasswordLastStepFun() {
             if (this.frogetPasswordStep === 1) {
@@ -336,22 +367,56 @@ export default defineComponent({
 
         //提交账号密码预先登录
         submitPerLogin() {
-            if (!this.username || !this.password) {
+			//输入账号密码
+			if(this.emailStap>=2){
+				return;
+			}else{
+				if (!this.username || !this.password || !this.email) {
                 message.error("Please enter your password");
                 return;
+            }
+			//输入邮箱
+			if (!this.email) {
+                message.error("Please enter your email address");
+                return;
+            }
+			//判断邮箱格式是否正确
+			if (!isEmail(this.email)) {
+                message.error("The email format is incorrect");
+                return;
+            }
+			//判断是否同意隐私政策
+			if (!this.checked) {
+                message.error("Agree to all terms, privacy fees and policies");
+                return;
             }
             let data = {
                 password: md5(this.password + "abc"),
                 userName: this.username,
+                email: this.email,
+				operationType:"LOGIN",
+				ip:"",
             };
-            Https.axiosPost(Https.httpUrls.preLogin, data).then(
+			// this.loginType = 'email'
+			// this.emailStap = 2;
+
+			Https.axiosPost(Https.httpUrls.preLogin, data).then(
                 (rv: any) => {
-                    if (rv) {
+                    // if (rv) {
+                    //     this.loginType = 'email'
+                    // }
+					
+					if (rv) {
                         this.userId = rv.userId
                         this.loginType = 'email'
+                        this.emailStap = 2;
+                        this.time = 60;
+                        this.emailCode = ["", "", "", "", "", ""]
+                        this.createTimer();
                     }
                 }
             );
+			}
         },
 
         changePasswordType(){
@@ -440,17 +505,53 @@ export default defineComponent({
         }
 
         .login_content {
+			
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);
-            width: 60rem;
+            // width: 60rem;
+			width: 120rem;
             background: #FFFFFF;
-            box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
+            // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
             border-radius: 1rem;
             padding: 3rem 6rem 6.5rem;
             box-sizing: border-box;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
 
+			.login_content_left{
+				width: 45%;
+				.login_form_email{
+					position: absolute;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					top: 0;
+					background: #fff;
+					transform: scale(0);
+					transition: .3s all;
+					border: 2px solid;
+					border-radius: 20px;
+					.email_last_step{
+						width: 100%;
+						height: 100%;
+						#app{
+							height: auto;
+						}
+					}
+				}
+				.active{
+					transform: scale(1);
+				}
+			}
+			.login_content_right{
+				width: 40%;
+				img{
+					width: 100%;
+				}
+			}
             .login_type_list {
                 width: 100%;
                 display: flex;
@@ -469,18 +570,35 @@ export default defineComponent({
                     }
                 }
             }
-
+			.login_form_title {
-            .login_form_content {
-                margin-top: 4rem;
-
-                .login_form_title {
                     font-size: 1.6rem;
-                    color: #666666;
+                    // color: #666666;
+					font-weight: 900;
+					color: #000;
                     display: flex;
                     justify-content: space-between;
                     box-sizing: border-box;
+					label{
+						display: flex;
+						span{
+							font-size: 1.6rem;
+							margin-left: 10px;
+							font-weight: normal;
+						}
+					}
                 }
 
+            .login_form_content {
+                margin-top: 4rem;
+				position: relative;
+                &[state="2"]{
+					>*{
+						opacity: 0;
+					}
+					.login_form_email{
+						opacity: 1;
+					}
+				}
                 .password_input_block{
                     position: relative;
 
@@ -513,10 +631,28 @@ export default defineComponent({
             }
 
             .email_last_step {
-                margin-top: 4rem;
+                // margin-top: 4rem;
-
+				.email_last_step_bottom{
+					padding: 0 40px;
+				}
                 .email_last_step_block{
-                    cursor: pointer;
+					padding: 10px;
+					border-bottom: 2px solid;
+					box-sizing: border-box;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					.email_last_step_content {
+                    margin-left: 1rem;
+                    font-size: 2.2rem;
+                    font-weight: bold;
+                    color: #030303;
+                }
+					.email_last_step_block_icon{
+						cursor: pointer;
+						margin-right: 1rem;
+						height: 20px;
+					}
                 }
 
                 .icon--shangyibu {
@@ -525,17 +661,12 @@ export default defineComponent({
                     color: #030303;
                 }
 
-                .email_last_step_content {
+                
-                    margin-left: 1rem;
-                    font-size: 2.2rem;
-                    font-weight: bold;
-                    color: #030303;
-                }
             }
 
             .login_submit_button {
                 height: 5rem;
-                background: #343579;
+                background: #000;
                 border-radius: 2.5rem;
                 line-height: 5rem;
                 text-align: center;
@@ -543,6 +674,9 @@ export default defineComponent({
                 font-weight: 500;
                 color: #ffffff;
                 cursor: pointer;
+				&[state="2"]{
+					cursor: not-allowed;
+				}
             }
             .login_text {
                 font-size: 1.6rem;
@@ -624,7 +758,7 @@ export default defineComponent({
 
             .forget_submit_button {
                 height: 5rem;
-                background: #343579;
+                background: #000;
                 border-radius: 2.5rem;
                 line-height: 5rem;
                 text-align: center;

vue.config.js

@@ -1,14 +1,22 @@
 const {defineConfig} = require('@vue/cli-service')
 const path = require('path');
+const webpack = require('webpack')
+
 module.exports = defineConfig({
+
   transpileDependencies: ['vuetify'],
   lintOnSave:false,//关闭语法检查
   devServer: {
     // hot: true, // 热更新
-    port: '8060',
+    // port: '8060',
+    port: process.env.NODE_ENV === 'production'
+	? '8060'
+	: '10086',
+
     proxy: {
       "/api": {
-        target: 'https://www.aida.com.hk', //后端接口地址
+        // target: 'https://www.aida.com.hk', //后端接口地址
+		target: process.env.VUE_APP_BASE_URL,
         changeOrigin: true, //是否允许跨越
       }
     },