First edition
This commit is contained in:
parent
dea3a0fb77
commit
bd94c3c58c
|
|
@ -24,3 +24,6 @@
|
|||
hs_err_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