First edition
This commit is contained in:
		
							parent
							
								
									dea3a0fb77
								
							
						
					
					
						commit
						bd94c3c58c
					
				|  | @ -1,26 +1,29 @@ | ||||||
| # ---> Java | # ---> Java | ||||||
| # Compiled class file | # Compiled class file | ||||||
| *.class | *.class | ||||||
| 
 | 
 | ||||||
| # Log file | # Log file | ||||||
| *.log | *.log | ||||||
| 
 | 
 | ||||||
| # BlueJ files | # BlueJ files | ||||||
| *.ctxt | *.ctxt | ||||||
| 
 | 
 | ||||||
| # Mobile Tools for Java (J2ME) | # Mobile Tools for Java (J2ME) | ||||||
| .mtj.tmp/ | .mtj.tmp/ | ||||||
| 
 | 
 | ||||||
| # Package Files # | # Package Files # | ||||||
| *.jar | *.jar | ||||||
| *.war | *.war | ||||||
| *.nar | *.nar | ||||||
| *.ear | *.ear | ||||||
| *.zip | *.zip | ||||||
| *.tar.gz | *.tar.gz | ||||||
| *.rar | *.rar | ||||||
| 
 | 
 | ||||||
| # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml | # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml | ||||||
| hs_err_pid* | hs_err_pid* | ||||||
| replay_pid* | replay_pid* | ||||||
| 
 | 
 | ||||||
|  | node_modules | ||||||
|  | .DS_Store | ||||||
|  | package-lock.json | ||||||
							
								
								
									
										12
									
								
								README.md
								
								
								
								
							
							
						
						
									
										12
									
								
								README.md
								
								
								
								
							|  | @ -1,3 +1,11 @@ | ||||||
| # teamco-xd-plugin |  | ||||||
| 
 | 
 | ||||||
| teamco adobe xd plugin | to build | ||||||
|  | 
 | ||||||
|  | install yarn (if needed) with | ||||||
|  |     npm install -g yarn | ||||||
|  | 
 | ||||||
|  | install dependencies with | ||||||
|  |     yarn install | ||||||
|  | 
 | ||||||
|  | watch and automaticaly rebuild with | ||||||
|  |     yarn watch | ||||||
|  |  | ||||||
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 357 B | 
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 607 B | 
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.2 KiB | 
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.9 KiB | 
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 2.6 KiB | 
|  | @ -0,0 +1,28 @@ | ||||||
|  | { | ||||||
|  |   "id": "TEAMCO_XD_PLUGIN", | ||||||
|  |   "name": "Teamco AdobeXD插件", | ||||||
|  |   "version": "1.0.0", | ||||||
|  |   "host": { | ||||||
|  |     "app": "XD", | ||||||
|  |     "minVersion": "13.0" | ||||||
|  |   }, | ||||||
|  |   "icons": [ | ||||||
|  |     { | ||||||
|  |       "width": 24, | ||||||
|  |       "height": 24, | ||||||
|  |       "path": "images/icon@1x.png" | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       "width": 48, | ||||||
|  |       "height": 48, | ||||||
|  |       "path": "images/icon@2x.png" | ||||||
|  |     } | ||||||
|  |   ], | ||||||
|  |   "uiEntryPoints": [ | ||||||
|  |     { | ||||||
|  |       "type": "panel", | ||||||
|  |       "label": "上传面板", | ||||||
|  |       "panelId": "Upload" | ||||||
|  |     } | ||||||
|  |   ] | ||||||
|  | } | ||||||
|  | @ -0,0 +1,23 @@ | ||||||
|  | { | ||||||
|  |   "name": "teamco-xd-plugin", | ||||||
|  |   "version": "1.0.0", | ||||||
|  |   "main": "main.js", | ||||||
|  |   "scripts": { | ||||||
|  |     "watch": "nodemon -w src -e js,vue,css -w webpack.config.js -x yarn build", | ||||||
|  |     "build": "webpack --mode development" | ||||||
|  |   }, | ||||||
|  |   "license": "none", | ||||||
|  |   "private": true, | ||||||
|  |   "devDependencies": { | ||||||
|  |     "vue-loader": "^15.2.6", | ||||||
|  |     "webpack": "^4.16.4", | ||||||
|  |     "webpack-cli": "^3.1.0" | ||||||
|  |   }, | ||||||
|  |   "dependencies": { | ||||||
|  |     "css-loader": "^1.0.0", | ||||||
|  |     "loadicons": "^1.0.0", | ||||||
|  |     "style-loader": "^0.22.0", | ||||||
|  |     "vue": "^2.5.17", | ||||||
|  |     "vue-template-compiler": "^2.5.17" | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | @ -0,0 +1,375 @@ | ||||||
|  | <template> | ||||||
|  |   <div id="app"> | ||||||
|  |     <div class="container" v-if="!isLogin"> | ||||||
|  |       <form class="the-form"> | ||||||
|  |         <div class="title">Teamco协同管理平台</div> | ||||||
|  |         <div class="subtitle">Teamco Collaborative Office Platform</div> | ||||||
|  |         <div class="the-input"> | ||||||
|  |           <span class="the-input__prefix"> | ||||||
|  |             <svg t="1671524834683" class="the-input__icon" viewBox="0 0 1024 1024" version="1.1" | ||||||
|  |               xmlns="http://www.w3.org/2000/svg" p-id="6842" width="25" height="46"> | ||||||
|  |               <path | ||||||
|  |                 d="M511.474 891.901c-93.153-0.039-182.884-35.043-251.394-98.065 64.013-20.676 170.97-50.917 249.008-50.917 79.344 0 188.906 31.394 252.511 52.03-68.34 62.347-157.552 96.924-250.125 96.952z m-186.521-385.69V399.99c0.103-102.822 83.538-186.162 186.521-186.31 102.846 0 186.521 83.585 186.521 186.31v110.693c0 11.919-1.377 23.5-3.506 34.787l-1.081 5.325a185.252 185.252 0 0 1-26.264 62.016l-2.311 3.428a190.054 190.054 0 0 1-47.859 47.672l-2.352 1.602a185.699 185.699 0 0 1-103.148 31.212 185.79 185.79 0 0 1-103.369-31.287l-2.09-1.455a188.779 188.779 0 0 1-47.933-47.745l-2.391-3.541a185.161 185.161 0 0 1-26.149-61.903l-1.083-5.364a187.47 187.47 0 0 1-3.506-34.748v-4.471zM511.474 64.698c-246.84 0-447.649 200.496-447.649 446.951 0 246.457 200.809 446.951 447.649 446.951 246.842 0 447.649-200.494 447.649-446.951 0-246.455-200.808-446.951-447.649-446.951z m0 0" | ||||||
|  |                 fill="#bfbfbf" p-id="6843"></path> | ||||||
|  |             </svg> | ||||||
|  |           </span> | ||||||
|  |           <input uxp-quiet="true" type="text" class="the-input-inner" placeholder="请输入用户名称" | ||||||
|  |             v-model="loginForm.username" /> | ||||||
|  |         </div> | ||||||
|  |         <div class="the-input"> | ||||||
|  |           <span class="the-input__prefix"> | ||||||
|  |             <svg t="1671525329220" class="the-input__icon" viewBox="0 0 1024 1024" version="1.1" | ||||||
|  |               xmlns="http://www.w3.org/2000/svg" p-id="9470" width="25" height="46"> | ||||||
|  |               <path | ||||||
|  |                 d="M655.54431073 120.1012469c-138.4177282 0-251.20254378 112.78481557-251.20254378 251.20254378 0 16.51898815 1.70886084 33.03797627 5.12658253 49.55696442l2.27848111 11.96202589-295.06330537 295.06330538v176.58228702h206.20254159v-102.53165053h96.26582744V705.67089542h95.12658687v-96.8354477h32.468356v-9.1139245l29.6202546 9.68354477c25.06329235 8.54430421 51.83544554 12.53164617 78.03797845 12.53164617 138.4177282 0 251.20254378-112.78481557 251.20254377-251.20254377 1.13924057-137.84810792-111.64557501-250.6329235-250.06330321-250.63292349z m93.98734631 210.18988357c0 29.05063432-23.92405179 52.9746861-52.97468611 52.97468611s-52.9746861-23.92405179-52.9746861-52.97468611 23.92405179-52.9746861 52.9746861-52.9746861 52.9746861 23.35443151 52.97468611 52.9746861z" | ||||||
|  |                 fill="#bfbfbf" p-id="9471"></path> | ||||||
|  |             </svg> | ||||||
|  |           </span> | ||||||
|  |           <input uxp-quiet="true" type="password" class="the-input-inner" placeholder="请输入登录密码" | ||||||
|  |             v-model="loginForm.password" /> | ||||||
|  |         </div> | ||||||
|  |         <div class="drag" ref="dragDiv"> | ||||||
|  |           <div class="drag_bg" ref="dragBg"></div> | ||||||
|  |           <div class="drag_text" ref="dragText">{{ confirmWords }}</div> | ||||||
|  |           <div ref="moveBgDiv" class="handler dp-flex" style="position: absolute; top: 0px; left: 0px;"> | ||||||
|  |             <span v-show="!confirmSuccess"> | ||||||
|  |               <svg t="1671761953193" class="slider-icon" viewBox="0 0 1024 1024" version="1.1" | ||||||
|  |                 xmlns="http://www.w3.org/2000/svg" p-id="4940"> | ||||||
|  |                 <path | ||||||
|  |                   d="M550.4 490.666667L230.4 170.666667 170.666667 230.4l260.266666 260.266667L170.666667 750.933333 230.4 810.666667l320-320z m298.666667 0L533.333333 170.666667 469.333333 230.4l260.266667 260.266667-260.266667 260.266666 59.733334 59.733334 320-320z" | ||||||
|  |                   fill="#cdcdcd" p-id="4941"></path> | ||||||
|  |               </svg> | ||||||
|  |             </span> | ||||||
|  |             <span v-show="confirmSuccess"> | ||||||
|  |               <svg t="1671762534208" class="slider-icon" viewBox="0 0 1024 1024" version="1.1" | ||||||
|  |                 xmlns="http://www.w3.org/2000/svg" p-id="6386"> | ||||||
|  |                 <path | ||||||
|  |                   d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" | ||||||
|  |                   fill="#7ac23c" p-id="6387"></path> | ||||||
|  |               </svg> | ||||||
|  |             </span> | ||||||
|  |             <div ref="moveDiv" class="move-mask" @mousedown="mousedownFn($event)"></div> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |         <button class="the-button" uxp-variant="cta" @click="login">登录</button> | ||||||
|  |       </form> | ||||||
|  |       <div class="top"> | ||||||
|  |         <div class="top-tips dp-flex"> | ||||||
|  |           <span>扫码登录</span> | ||||||
|  |           <div class="cube-container"> | ||||||
|  |             <div class="cube"> | ||||||
|  |               <span> | ||||||
|  |                 <i class="cube-base">◆</i> | ||||||
|  |                 <i class="cube-cover">◆</i> | ||||||
|  |               </span> | ||||||
|  |             </div> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |         <div class="top-code dp-flex"> | ||||||
|  |           <svg t="1671583780179" class="top-qrcode" viewBox="0 0 1024 1024" version="1.1" | ||||||
|  |             xmlns="http://www.w3.org/2000/svg" p-id="2752" width="26" height="26"> | ||||||
|  |             <path | ||||||
|  |               d="M91.666 63.942h358.908c36.5 3.567 27.703 66.963 27.703 108.152v196.1c0 42.618 8.134 94.857-20.474 106.964-18.631 7.883-68.633 2.375-92.739 2.375H174.771c-43.989 0-104.054 10.362-110.805-27.335V91.275c4.92-13.368 13.571-23.053 27.7-27.333z m49.38 80.817v255.523h258.946v-259.09h-257.74c-1.403 0.2-1.307 1.879-1.206 3.567z m432.377-80.817h358.908c14.64 5.359 24.701 15.243 27.703 32.088v349.415c-3.286 14.521-10.966 26.923-25.292 30.902-23.413 6.5-62.312 1.186-90.331 1.186H660.14c-27.789 0-68.973 5.777-91.535-1.186-31.849-9.834-22.882-71.184-22.882-114.097V179.225c0-49.548-11.022-108.359 27.7-115.283z m49.381 80.817v255.523h258.943v-259.09h-257.74c-1.401 0.2-1.308 1.879-1.203 3.567z m-363.727 74.873c36.064-6.715 64.424 17.331 65.039 49.918 0.807 42.973-43.672 66.577-78.287 48.729-39.6-20.426-36.995-89.289 13.248-98.647z m481.757 0c84.945-15.659 83.317 117.093 0 103.4-53.024-8.714-54.733-93.307 0-103.4zM448.166 960.058H92.872c-14.751-4.46-24.716-13.642-28.907-28.521V573.803c3.51-10.47 11.608-22.681 24.088-26.149 23.578-6.546 62.085-1.186 90.328-1.186h184.274c27.234 0 66.867-5.999 91.532 1.186 33.369 9.723 24.088 70.075 24.088 112.908v188.967c0.002 46.231 10.089 106.404-30.109 110.529z m-307.12-332.773v255.523h258.946v-259.09h-257.74c-1.403 0.2-1.307 1.879-1.206 3.567z m818.988-48.73v99.833c-2.811 33.674-0.403 72.495-1.207 108.152H702.294v-58.234c-24.091-2.775-53.395-0.4-79.491-1.192-2.811 75.273-0.4 155.693-1.204 232.943h-46.973c-40.386-7.988-28.904-67.787-28.904-115.28V660.56c0-27.7-5.682-69.224 1.204-91.514 8.215-26.591 43.842-22.58 79.491-22.58h174.634v158.068h80.695c0.801-52.293-1.607-107.755 1.204-158.068 38.834-2.269 74.802-1.71 77.084 32.089zM265.099 700.968c38.507-4.206 70.341 32.315 55.403 72.498-20.707 55.701-119.71 34.764-101.169-35.655 5.123-19.463 19.928-34.02 45.766-36.843z m523.912 259.09h-86.717c0.801-30.505-1.607-64.176 1.204-92.703h85.513v92.703z m171.023-92.703v60.615c-3.352 16.901-13.364 27.222-28.907 32.088h-61.425c0.804-30.505-1.604-64.176 1.207-92.703h89.125z" | ||||||
|  |               p-id="2753"></path> | ||||||
|  |           </svg> | ||||||
|  |           <div class="top-code-mask" @click="showQrcode"></div> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |     <upload-artboards v-else></upload-artboards> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | const { Panel } = require("./api/artboards.js"); | ||||||
|  | const { teamco_param } = require("./const.js"); | ||||||
|  | const UploadArtboards = require("./views/UploadArtboards.vue").default; | ||||||
|  | module.exports = { | ||||||
|  |   components: { | ||||||
|  |     "upload-artboards": UploadArtboards | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       beginClientX: 0 /*距离屏幕左端距离*/, | ||||||
|  |       mouseMoveStata: false /*触发拖动状态  判断*/, | ||||||
|  |       maxwidth: 0 /*拖动最大宽度,依据滑块宽度算出来的*/, | ||||||
|  |       confirmWords: "按住滑块滑动,拖到最右边" /*滑块文字*/, | ||||||
|  |       confirmSuccess: false /*验证成功判断*/, | ||||||
|  |       loginForm: { | ||||||
|  |         username: '', | ||||||
|  |         password: '' | ||||||
|  |       }, | ||||||
|  |       isLogin: false | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     showQrcode() { | ||||||
|  |       console.log("扫码登录"); | ||||||
|  |     }, | ||||||
|  |     mousedownFn(e) { | ||||||
|  |       // mounted里获取不到dragDiv和moveDiv的offsetWidth,所以暂时在这取值 | ||||||
|  |       if (!this.maxwidth) { | ||||||
|  |         this.maxwidth = this.$refs.dragDiv.offsetWidth - this.$refs.moveDiv.offsetWidth; | ||||||
|  |       } | ||||||
|  |       if (!this.confirmSuccess) { | ||||||
|  |         e.preventDefault && e.preventDefault(); //阻止文字选中等浏览器默认事件 | ||||||
|  |         this.mouseMoveStata = true; | ||||||
|  |         this.beginClientX = e.clientX; | ||||||
|  |       } | ||||||
|  |     }, //mousedoen 事件 | ||||||
|  |     successFunction() { | ||||||
|  |       this.confirmSuccess = true; | ||||||
|  |       this.confirmWords = "验证通过"; | ||||||
|  |       if (window.addEventListener) { | ||||||
|  |         this.$refs.moveDiv.removeEventListener("mousemove", this.mouseMoveFn); | ||||||
|  |         this.$refs.moveDiv.removeEventListener("mouseup", this.moseUpFn); | ||||||
|  |       } else { | ||||||
|  |         this.$refs.moveDiv.removeEventListener("mouseup", () => { }); | ||||||
|  |       } | ||||||
|  |       this.$refs.moveBgDiv.style.left = this.maxwidth + "px"; | ||||||
|  |       this.$refs.dragBg.style.width = this.maxwidth + "px"; | ||||||
|  |     }, //验证成功函数 | ||||||
|  |     mouseMoveFn(e) { | ||||||
|  |       if (this.mouseMoveStata) { | ||||||
|  |         let width = e.clientX - this.beginClientX; | ||||||
|  |         if (width > 0 && width < this.maxwidth) { | ||||||
|  |           this.$refs.dragBg.style.width = width + "px"; | ||||||
|  |           this.$refs.moveBgDiv.style.left = width + "px"; | ||||||
|  |         } else if (width >= this.maxwidth) { | ||||||
|  |           this.successFunction(); | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     }, //mousemove事件 | ||||||
|  |     moseUpFn(e) { | ||||||
|  |       this.mouseMoveStata = false; | ||||||
|  |       var width = e.clientX - this.beginClientX; | ||||||
|  |       if (width < this.maxwidth) { | ||||||
|  |         this.$refs.dragBg.style.width = 0 + "px"; | ||||||
|  |         this.$refs.moveBgDiv.style.left = 0 + "px"; | ||||||
|  |       } | ||||||
|  |     }, //mouseup事件 | ||||||
|  |     // 设置监听事件 | ||||||
|  |     setEventListener() { | ||||||
|  |       if (!this.isLogin) { | ||||||
|  |         this.$refs.moveDiv.addEventListener("mousemove", this.mouseMoveFn); | ||||||
|  |         this.$refs.moveDiv.addEventListener("mouseup", this.moseUpFn); | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     resetMoveDiv() { | ||||||
|  |       this.setEventListener(); | ||||||
|  |       this.confirmSuccess = false; | ||||||
|  |       this.confirmWords = "按住滑块滑动,拖到最右边"; | ||||||
|  |     }, | ||||||
|  |     async login() { | ||||||
|  |       if (this.loginForm.username && this.loginForm.password && this.confirmSuccess) { | ||||||
|  |         const res = await Panel.login(this.loginForm); | ||||||
|  |         if (res.success) { | ||||||
|  |           teamco_param.teamco_token = res.result.token; | ||||||
|  |           this.$storage.setItem("teamco_access_token", res.result.token, 30 * 24 * 60 * 60);  // 过期时间:30天 | ||||||
|  |           this.isLogin = true; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   created() { | ||||||
|  |     const token = this.$storage.getItem("teamco_access_token"); | ||||||
|  |     this.isLogin = token ? true : false; | ||||||
|  |   }, | ||||||
|  |   mounted() { | ||||||
|  |     this.setEventListener(); | ||||||
|  |   }, | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style scoped> | ||||||
|  | .container { | ||||||
|  |   width: 100%; | ||||||
|  |   position: relative; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .the-form { | ||||||
|  |   width: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .title { | ||||||
|  |   font-size: 20px; | ||||||
|  |   color: #7f7f7f; | ||||||
|  |   margin-top: 22px; | ||||||
|  |   margin-left: 64px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .subtitle { | ||||||
|  |   font-size: 14px; | ||||||
|  |   color: #868686; | ||||||
|  |   margin-left: 38px; | ||||||
|  |   margin-bottom: 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .the-input { | ||||||
|  |   box-sizing: border-box; | ||||||
|  |   /* padding: 0 8px; */ | ||||||
|  |   padding: 0 15px 0 5px; | ||||||
|  |   margin: 0 14px 8px 8px; | ||||||
|  |   cursor: pointer; | ||||||
|  |   background-color: #fff; | ||||||
|  |   border-radius: 4px; | ||||||
|  |   border: 1px solid #e4e4e4; | ||||||
|  |   height: 46px; | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .the-input-inner { | ||||||
|  |   margin: 0 0 0 7px; | ||||||
|  |   flex: 1; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .the-input__prefix { | ||||||
|  |   height: 100%; | ||||||
|  |   color: #c0c4cc; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .the-input__icon { | ||||||
|  |   width: 25px; | ||||||
|  |   height: 100%; | ||||||
|  |   line-height: 46px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .the-button { | ||||||
|  |   margin: 8px 14px 8px 8px; | ||||||
|  |   /* height: 46px; | ||||||
|  |   border-radius: 4px; | ||||||
|  |   background-color: #409eff; */ | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .dp-flex { | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: center; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .top { | ||||||
|  |   position: absolute; | ||||||
|  |   z-index: 1; | ||||||
|  |   top: 2px; | ||||||
|  |   right: 4px; | ||||||
|  |   /* width: 140px; | ||||||
|  |   height: 42px; */ | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: flex-end; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .top-tips { | ||||||
|  |   position: relative; | ||||||
|  |   width: 66px; | ||||||
|  |   height: 34px; | ||||||
|  |   background: #fff; | ||||||
|  |   border: 1px #5896ff solid; | ||||||
|  |   border-radius: 4px; | ||||||
|  |   color: #5896ff; | ||||||
|  |   font-size: 12px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .cube-container { | ||||||
|  |   position: absolute; | ||||||
|  |   top: 8px; | ||||||
|  |   right: 5px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .cube { | ||||||
|  |   position: relative; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .cube span i { | ||||||
|  |   position: absolute; | ||||||
|  |   font-style: normal; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .cube-base { | ||||||
|  |   color: #5896ff; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .cube-cover { | ||||||
|  |   left: -1px; | ||||||
|  |   color: white; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .top-code { | ||||||
|  |   width: 30px; | ||||||
|  |   height: 30px; | ||||||
|  |   margin-left: 12px; | ||||||
|  |   position: relative; | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .top-qrcode { | ||||||
|  |   width: 26px; | ||||||
|  |   height: 26px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .top-code-mask { | ||||||
|  |   position: absolute; | ||||||
|  |   z-index: 1; | ||||||
|  |   width: 30px; | ||||||
|  |   height: 30px; | ||||||
|  |   background-repeat: no-repeat; | ||||||
|  |   background-image: linear-gradient(45deg, #fff 50%, rgba(255, 255, 255, 0) 50%); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .drag { | ||||||
|  |   position: relative; | ||||||
|  |   background-color: #e4e4e4; | ||||||
|  |   margin: 0 14px 12px 8px; | ||||||
|  |   height: 38px; | ||||||
|  |   line-height: 38px; | ||||||
|  |   text-align: center; | ||||||
|  |   border-radius: 4px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .handler { | ||||||
|  |   width: 48px; | ||||||
|  |   height: 38px; | ||||||
|  |   background-color: #fff; | ||||||
|  |   border: 1px solid #ccc; | ||||||
|  |   cursor: pointer; | ||||||
|  |   border-radius: 4px; | ||||||
|  |   /* box-shadow: 0 2px 12px 0 rgb(0, 0, 0, 10%); */ | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .move-mask { | ||||||
|  |   position: absolute; | ||||||
|  |   z-index: 10; | ||||||
|  |   width: 48px; | ||||||
|  |   height: 38px; | ||||||
|  |   border: 1px solid #ccc; | ||||||
|  |   cursor: pointer; | ||||||
|  |   border-radius: 4px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .slider-icon { | ||||||
|  |   width: 16px; | ||||||
|  |   height: 16px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .drag_bg { | ||||||
|  |   background-color: #7ac23c; | ||||||
|  |   height: 38px; | ||||||
|  |   width: 0px; | ||||||
|  |   border-radius: 4px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .drag_text { | ||||||
|  |   color: #fff; | ||||||
|  |   font-size: 14px; | ||||||
|  |   position: absolute; | ||||||
|  |   top: 0px; | ||||||
|  |   width: 100%; | ||||||
|  |   text-align: center; | ||||||
|  |   -moz-user-select: none; | ||||||
|  |   -webkit-user-select: none; | ||||||
|  |   user-select: none; | ||||||
|  |   -o-user-select: none; | ||||||
|  |   -ms-user-select: none; | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -0,0 +1,21 @@ | ||||||
|  | import api from "./xhr.js"; | ||||||
|  | 
 | ||||||
|  | class Panel { | ||||||
|  |   static async login(data) { | ||||||
|  |     try { | ||||||
|  |       const res = await api.post('/teamco-dev/sys/loginNoCode', data); | ||||||
|  |       return res; | ||||||
|  |     } catch (error) { | ||||||
|  |       return false | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   static async getProjectList(data) { | ||||||
|  |     try { | ||||||
|  |       const res = await api.get('/teamco-dev/project/info/jhTcProjectInfo/list', data); | ||||||
|  |       return res; | ||||||
|  |     } catch (error) { | ||||||
|  |       return false | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | export { Panel }; | ||||||
|  | @ -0,0 +1,45 @@ | ||||||
|  | class Storage { | ||||||
|  |   constructor(name) { | ||||||
|  |     this.name = 'storage'; | ||||||
|  |   } | ||||||
|  |   //设置缓存
 | ||||||
|  |   setItem(name, value, expires = null) { | ||||||
|  |     const options = { | ||||||
|  |       value: value, | ||||||
|  |       expires: expires ? expires * 1000 : null, | ||||||
|  |       startTime: expires ? new Date().getTime() : 0 | ||||||
|  |     } | ||||||
|  |     localStorage.setItem(name, JSON.stringify(options)); | ||||||
|  |   } | ||||||
|  |   //拿到缓存
 | ||||||
|  |   getItem(name) { | ||||||
|  |     let item = localStorage.getItem(name); | ||||||
|  |     if (item === null) return null; | ||||||
|  |     item = JSON.parse(item); | ||||||
|  |     //如果有 startTime 的值,说明设置了失效时间
 | ||||||
|  |     if (item.startTime) { | ||||||
|  |       const date = new Date().getTime(); | ||||||
|  |       //何时将值取出减去刚存入的时间,与item.expires比较,如果大于就是过期了,如果小于或等于就还没过期
 | ||||||
|  |       if (date - item.startTime > item.expires) { | ||||||
|  |         //缓存过期,清除缓存,返回false
 | ||||||
|  |         localStorage.removeItem(name); | ||||||
|  |         return null; | ||||||
|  |       } else { | ||||||
|  |         //缓存未过期,返回值
 | ||||||
|  |         return item.value; | ||||||
|  |       } | ||||||
|  |     } else { | ||||||
|  |       //如果没有设置失效时间,直接返回值
 | ||||||
|  |       return item.value; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   //移出缓存
 | ||||||
|  |   removeItem(name) { | ||||||
|  |     localStorage.removeItem(name); | ||||||
|  |   } | ||||||
|  |   //移出全部缓存
 | ||||||
|  |   clear() { | ||||||
|  |     localStorage.clear(); | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | export default Storage | ||||||
|  | @ -0,0 +1,78 @@ | ||||||
|  | const { TEAMCO_BASE_URL } = require("../const.js"); | ||||||
|  | 
 | ||||||
|  | const getQueryString = (data) => { | ||||||
|  |   let paramsArr = []; | ||||||
|  |   if (data && data instanceof Object) { | ||||||
|  |     Object.keys(data).forEach((key) => { | ||||||
|  |       let val = data[key] | ||||||
|  |       paramsArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(val)); | ||||||
|  |     }) | ||||||
|  |     return '?' + paramsArr.join('&') | ||||||
|  |   } | ||||||
|  |   return '' | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function xhrBinary(settings) { | ||||||
|  |   const headers = settings.headers || {}; | ||||||
|  |   let reqCfg = { | ||||||
|  |     url: '', | ||||||
|  |     method: '', | ||||||
|  |     data: null, | ||||||
|  |     timeout: 10000, | ||||||
|  |     ...settings, | ||||||
|  |     headers: { | ||||||
|  |       'Content-Type': "application/json", | ||||||
|  |       ...headers | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   return new Promise((resolve, reject) => { | ||||||
|  |     let xhr = new XMLHttpRequest(); | ||||||
|  |     xhr.onreadystatechange = function () { | ||||||
|  |       if (xhr.readyState == 4) { | ||||||
|  |         //根据服务器的响应内容格式处理响应结果
 | ||||||
|  |         if (xhr.getResponseHeader("content-type") === "application/json") { | ||||||
|  |           const result = JSON.parse(xhr.responseText); | ||||||
|  |           resolve(result); | ||||||
|  |           //根据返回结果判断验证码是否正确
 | ||||||
|  |           if (result.code === -1) { | ||||||
|  |             reject("验证码错误"); | ||||||
|  |           } | ||||||
|  |         } else { | ||||||
|  |           reject(xhr.responseText); | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     }; | ||||||
|  |     xhr.onerror = reject; | ||||||
|  |     xhr.onabort = reject; | ||||||
|  |     xhr.open(reqCfg.method, reqCfg.url, true); | ||||||
|  |     const token = localStorage.getItem("teamco_access_token") ? localStorage.getItem("teamco_access_token") : ""; | ||||||
|  |     xhr.setRequestHeader("token", token); | ||||||
|  |     for (const key of Object.keys(reqCfg.headers)) { | ||||||
|  |       xhr.setRequestHeader(key, reqCfg.headers[key]) | ||||||
|  |     } | ||||||
|  |     xhr.send(reqCfg.data); | ||||||
|  |   }); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | const api = { | ||||||
|  |   post(url, data) { | ||||||
|  |     const settings = { | ||||||
|  |       url: TEAMCO_BASE_URL + url, | ||||||
|  |       method: "POST", | ||||||
|  |       data: JSON.stringify(data) | ||||||
|  |     } | ||||||
|  |     return xhrBinary(settings); | ||||||
|  |   }, | ||||||
|  |   get(url, data) { | ||||||
|  |     const settings = { | ||||||
|  |       url: TEAMCO_BASE_URL + url + getQueryString(data), | ||||||
|  |       method: "GET", | ||||||
|  |       headers: { | ||||||
|  |         'Content-Type': "application/x-www-form-urlencoded" | ||||||
|  |       } | ||||||
|  |     }; | ||||||
|  |     return xhrBinary(settings) | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export default api; | ||||||
|  | @ -0,0 +1,14 @@ | ||||||
|  | // teamco 系统
 | ||||||
|  | //export const TEAMCO_BASE_URL = 'http://2vw5rm.natappfree.cc'
 | ||||||
|  | 
 | ||||||
|  | export const TEAMCO_BASE_URL = "http://ty.y68.fun"; | ||||||
|  | 
 | ||||||
|  | export var cur_teamco_token = ""; | ||||||
|  | 
 | ||||||
|  | export var teamco_param = { | ||||||
|  |   teamco_token: "", | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export var axure_param = { | ||||||
|  |   axure_state: "end", | ||||||
|  | }; | ||||||
|  | @ -0,0 +1,39 @@ | ||||||
|  | const styles = require("./styles.css"); | ||||||
|  | 
 | ||||||
|  | const Vue = require("vue").default; | ||||||
|  | const App = require("./App.vue").default; | ||||||
|  | 
 | ||||||
|  | const store = require("./store/index.js").default; | ||||||
|  | const Storage = require("./api/storage.js").default; | ||||||
|  | 
 | ||||||
|  | function show() { | ||||||
|  |   document.body.innerHTML = `<div id="app"></div>`; | ||||||
|  |   Vue.prototype.$store = store; | ||||||
|  |   Vue.prototype.$storage = new Storage(); | ||||||
|  |   new Vue({ | ||||||
|  |     render: h => h(App) | ||||||
|  |   }).$mount('#app') | ||||||
|  |   let html = document.getElementsByTagName("html")[0]; | ||||||
|  |   // html.style.width = "375px";
 | ||||||
|  |   html.style.backgroundColor = "#ffffff"; | ||||||
|  |   // let body = document.getElementsByTagName("body")[0];
 | ||||||
|  |   // body.classList.remove("uxp-plugin");
 | ||||||
|  | } | ||||||
|  | function update(selection, SceneNode) { | ||||||
|  |   console.log(selection); | ||||||
|  |   store.setAllArtboardsAction(SceneNode.children); | ||||||
|  |   const { Artboard } = require("scenegraph"); | ||||||
|  |   if (!selection || !(selection.items[0] instanceof Artboard)) { | ||||||
|  |     store.clearArtboardsAction(); | ||||||
|  |   } else { | ||||||
|  |     store.setArtboardsAction(selection.items); | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | module.exports = { | ||||||
|  |   panels: { | ||||||
|  |     Upload: { | ||||||
|  |       show, | ||||||
|  |       update | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | }; | ||||||
|  | @ -0,0 +1,30 @@ | ||||||
|  | // 简单的 store 模式
 | ||||||
|  | let store = { | ||||||
|  |   state: { | ||||||
|  |     artboards: [], // 选中的面板
 | ||||||
|  |     artboardsName: [], | ||||||
|  |     allArtboards: [], // 当前页所有面板
 | ||||||
|  |     allArtboardsName: [] | ||||||
|  |   }, | ||||||
|  |   setAllArtboardsAction(newValue) { | ||||||
|  |     let name = []; | ||||||
|  |     newValue.forEach(element => { | ||||||
|  |       name.push("# " + element.name) | ||||||
|  |     }); | ||||||
|  |     this.state.allArtboards = newValue; | ||||||
|  |     this.state.allArtboardsName = name; | ||||||
|  |   }, | ||||||
|  |   setArtboardsAction(newValue) { | ||||||
|  |     let name = []; | ||||||
|  |     newValue.forEach(element => { | ||||||
|  |       name.push("# " + element.name) | ||||||
|  |     }); | ||||||
|  |     this.state.artboards = newValue; | ||||||
|  |     this.state.artboardsName = name; | ||||||
|  |   }, | ||||||
|  |   clearArtboardsAction() { | ||||||
|  |     this.state.artboards = []; | ||||||
|  |     this.state.artboardsName = []; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | export default store | ||||||
|  | @ -0,0 +1,3 @@ | ||||||
|  | p { | ||||||
|  |     color: blueviolet; | ||||||
|  | } | ||||||
|  | @ -0,0 +1,278 @@ | ||||||
|  | <template> | ||||||
|  |   <div id="app"> | ||||||
|  |     <div class="title">Teamco协同管理平台</div> | ||||||
|  |     <div class="subtitle">Teamco Collaborative Office Platform</div> | ||||||
|  |     <form class="panel-form"> | ||||||
|  |       <div class="panel-title">选择画板</div> | ||||||
|  |       <div class="panel-select dp-flex"> | ||||||
|  |         <label class="panel-radio dp-flex"><input v-model="curpanel" type="radio" value="selected" name="panel" | ||||||
|  |             @change="getRadioVal">选中的画板</label> | ||||||
|  |         <label class="panel-radio dp-flex"><input v-model="curpanel" type="radio" value="all" name="panel" | ||||||
|  |             @change="getRadioVal">当前页的所有画板</label> | ||||||
|  |       </div> | ||||||
|  |       <div class="panel-area" :class="{ 'dp-flex-center': showArtboardsName.length === 0 }"> | ||||||
|  |         <div class="artboards" v-for="(item, index) in showArtboardsName" :key="index">{{ item }}</div> | ||||||
|  |         <div class="panel-tips" v-show="showArtboardsName.length === 0">请选择画板</div> | ||||||
|  |       </div> | ||||||
|  |     </form> | ||||||
|  |     <form class="panel-form"> | ||||||
|  |       <div class="panel-title mb-8">上传到</div> | ||||||
|  |       <div class="up-row dp-flex"> | ||||||
|  |         <div class="up-label">项目名称:</div> | ||||||
|  |         <!-- select上的v-model双向绑定不起作用? --> | ||||||
|  |         <select class="flex-1" name="project" @change="changeOption($event, 'projectId')"> | ||||||
|  |           <option v-for="options in projects" :key="options.id" :value="options.id">{{ options.name }}</option> | ||||||
|  |         </select> | ||||||
|  |       </div> | ||||||
|  |       <div class="up-row dp-flex mr-8"> | ||||||
|  |         <div class="up-label">版本信息:</div> | ||||||
|  |         <select class="flex-1" name="version" @change="changeOption($event, 'versionId')"> | ||||||
|  |           <option v-for="options in versions" :key="options.id" :value="options.id">{{ options.name }}</option> | ||||||
|  |         </select> | ||||||
|  |         <span> | ||||||
|  |           <svg t="1671784763256" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" | ||||||
|  |             p-id="2696" width="16" height="16" @click="toNewVer"> | ||||||
|  |             <path | ||||||
|  |               d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" | ||||||
|  |               fill="#666666" p-id="2697"></path> | ||||||
|  |           </svg> | ||||||
|  |         </span> | ||||||
|  |       </div> | ||||||
|  |       <button class="up-btn" uxp-variant="cta" @click="toUpload">覆盖上传</button> | ||||||
|  |     </form> | ||||||
|  |     <dialog ref="dialog"> | ||||||
|  |       <form method="dialog" style="width: 300px"> | ||||||
|  |         <div class="header"> | ||||||
|  |           <span>创建新的版本</span> | ||||||
|  |           <div class="close"> | ||||||
|  |             <svg t="1671605855187" class="icon" viewBox="0 0 1045 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" | ||||||
|  |               p-id="2823" width="20" height="20" @click="close"> | ||||||
|  |               <path | ||||||
|  |                 d="M282.517333 213.376l-45.354666 45.162667L489.472 512 237.162667 765.461333l45.354666 45.162667L534.613333 557.354667l252.096 253.269333 45.354667-45.162667-252.288-253.44 252.288-253.482666-45.354667-45.162667L534.613333 466.624l-252.096-253.226667z" | ||||||
|  |                 fill="#ffffff" p-id="2824"></path> | ||||||
|  |             </svg> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |         <form class="container"> | ||||||
|  |           <div class="dp-flex"> | ||||||
|  |             <span>版本信息:</span> | ||||||
|  |             <input class="flex-1" /> | ||||||
|  |           </div> | ||||||
|  |         </form> | ||||||
|  |         <div class="footer"> | ||||||
|  |           <button uxp-variant="cta" uxp-quiet="true" @click="close">取消</button> | ||||||
|  |           <button uxp-variant="cta" @click="close" type="submit">确定</button> | ||||||
|  |         </div> | ||||||
|  |       </form> | ||||||
|  |     </dialog> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | const { Panel } = require('../api/artboards.js'); | ||||||
|  | const store = require('../store/index.js').default; | ||||||
|  | module.exports = { | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       curpanel: "selected", // 选择的画板 | ||||||
|  |       // artboardsName: [], | ||||||
|  |       state: store.state, | ||||||
|  |       showArtboardsName: [], | ||||||
|  |       projects: [ | ||||||
|  |         { id: 1, name: '项目一' }, | ||||||
|  |         { id: 2, name: '项目二' }, | ||||||
|  |       ], | ||||||
|  |       projectId: null, | ||||||
|  |       versions: [ | ||||||
|  |         { id: 1, name: '1.0.0' }, | ||||||
|  |         { id: 2, name: '1.0.1' }, | ||||||
|  |         { id: 3, name: '1.0.2' }, | ||||||
|  |       ], | ||||||
|  |       versionId: null, | ||||||
|  |       dialog: null | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     // 画板单选框改变 | ||||||
|  |     getRadioVal() { | ||||||
|  |       this.curpanel === "selected" && (this.showArtboardsName = this.state.artboardsName); | ||||||
|  |       this.curpanel === "all" && (this.showArtboardsName = this.state.allArtboardsName); | ||||||
|  |     }, | ||||||
|  |     // 选择框选项改变 | ||||||
|  |     changeOption(e, prop) { | ||||||
|  |       this[prop] = e.target.value; | ||||||
|  |     }, | ||||||
|  |     toNewVer() { | ||||||
|  |       if (this.dialog) { | ||||||
|  |         this.dialog.showModal(); | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     // 覆盖上传 | ||||||
|  |     toUpload() { | ||||||
|  |       // const msg = { | ||||||
|  |       //   curpanel: this.curpanel, | ||||||
|  |       //   projectId: this.projectId, | ||||||
|  |       //   versionId: this.versionId | ||||||
|  |       // } | ||||||
|  |       // console.log("上传信息:", msg); | ||||||
|  |     }, | ||||||
|  |     close() { | ||||||
|  |       this.dialog.close(); | ||||||
|  |     }, | ||||||
|  |     async getProjectList() { | ||||||
|  |       const data = { | ||||||
|  |         pageSize: 10, | ||||||
|  |         pageNo: 1 | ||||||
|  |       } | ||||||
|  |       const res = await Panel.getProjectList(data); | ||||||
|  |       if (res) { | ||||||
|  |         console.log(res); | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   watch: { | ||||||
|  |     'state.artboardsName'(newVal) { | ||||||
|  |       if (this.curpanel === "selected") { | ||||||
|  |         this.showArtboardsName = newVal; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   mounted() { | ||||||
|  |     // this.$storage.removeItem("teamco_access_token"); | ||||||
|  |     this.showArtboardsName = this.state.artboardsName; | ||||||
|  |     this.$nextTick(() => { | ||||||
|  |       this.dialog = this.$refs.dialog; | ||||||
|  |       this.getProjectList(); | ||||||
|  |     }) | ||||||
|  |   }, | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style scoped> | ||||||
|  | .dp-flex { | ||||||
|  |   display: flex; | ||||||
|  |   flex-direction: row; | ||||||
|  |   align-items: center; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .dp-flex-center { | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: center; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .flex-1 { | ||||||
|  |   flex: 1; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .mb-8 { | ||||||
|  |   margin-bottom: 8px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .mr-8 { | ||||||
|  |   margin-right: 8px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .the-form { | ||||||
|  |   width: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .title { | ||||||
|  |   font-size: 20px; | ||||||
|  |   color: #7f7f7f; | ||||||
|  |   margin-top: 10px; | ||||||
|  |   margin-left: 84px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .subtitle { | ||||||
|  |   font-size: 14px; | ||||||
|  |   color: #868686; | ||||||
|  |   margin-left: 58px; | ||||||
|  |   margin-bottom: 32px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .panel-form { | ||||||
|  |   padding: 0 4px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .panel-title { | ||||||
|  |   font-size: 18px; | ||||||
|  |   font-weight: bold; | ||||||
|  |   color: #666666; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .panel-select { | ||||||
|  |   padding: 0 6px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .panel-radio { | ||||||
|  |   width: 50%; | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .panel-area { | ||||||
|  |   min-height: 56px; | ||||||
|  |   margin: 4px 4px 8px; | ||||||
|  |   padding: 10px 8px; | ||||||
|  |   border-radius: 4px; | ||||||
|  |   background-color: #efefef; | ||||||
|  |   display: flex; | ||||||
|  |   flex-wrap: wrap; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .artboards { | ||||||
|  |   padding: 4px 6px; | ||||||
|  |   margin-right: 8px; | ||||||
|  |   margin-bottom: 8px; | ||||||
|  |   background-color: #fff; | ||||||
|  |   border-radius: 4px; | ||||||
|  |   font-size: 9px; | ||||||
|  |   color: #7a7a7a; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .panel-tips { | ||||||
|  |   font-size: 12px; | ||||||
|  |   color: #606060; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .up-row { | ||||||
|  |   margin-left: 8px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .up-label { | ||||||
|  |   font-size: 12px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .up-btn { | ||||||
|  |   margin: 48px 120px 16px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .header { | ||||||
|  |   background-color: #409eff; | ||||||
|  |   height: 40px; | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: space-between; | ||||||
|  |   padding: 0 12px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .header span { | ||||||
|  |   color: #fff; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .close { | ||||||
|  |   width: 20px; | ||||||
|  |   height: 20px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .container { | ||||||
|  |   width: 300px; | ||||||
|  |   box-sizing: border-box; | ||||||
|  |   padding: 24px 4px 24px 12px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .footer { | ||||||
|  |   display: flex; | ||||||
|  |   justify-content: flex-end; | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -0,0 +1,30 @@ | ||||||
|  | const { VueLoaderPlugin } = require('vue-loader') | ||||||
|  | 
 | ||||||
|  | module.exports = { | ||||||
|  |     entry: "./src/main.js", | ||||||
|  |     output: { | ||||||
|  |         path: __dirname, | ||||||
|  |         filename: 'main.js', | ||||||
|  |         libraryTarget: "commonjs2" | ||||||
|  |     }, | ||||||
|  |     devtool: "none", // prevent webpack from using eval() on my module
 | ||||||
|  |     externals: { | ||||||
|  |         uxp: "uxp", | ||||||
|  |         scenegraph: "scenegraph" | ||||||
|  |     }, | ||||||
|  |     module: { | ||||||
|  |         rules: [ | ||||||
|  |             { | ||||||
|  |                 test: /\.vue$/, | ||||||
|  |                 loader: "vue-loader" | ||||||
|  |             }, | ||||||
|  |             { | ||||||
|  |                 test: /\.css$/, | ||||||
|  |                 use: ["style-loader", "css-loader"] | ||||||
|  |             } | ||||||
|  |         ] | ||||||
|  |     }, | ||||||
|  |     plugins: [ | ||||||
|  |         new VueLoaderPlugin() | ||||||
|  |     ] | ||||||
|  | }; | ||||||
		Loading…
	
		Reference in New Issue