Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
DoraemonKit
提交
7737a802
D
DoraemonKit
项目概览
DiDi
/
DoraemonKit
12 个月 前同步成功
通知
166
Star
19623
Fork
3062
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
DoraemonKit
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
7737a802
编写于
5月 28, 2021
作者:
A
AdamCaoQAQ
提交者:
GitHub
5月 28, 2021
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #823 from didi/feature/dev-web
Feature/dev web
上级
268ee3e0
80af155a
变更
24
展开全部
隐藏空白更改
内联
并排
Showing
24 changed file
with
1753 addition
and
619 deletion
+1753
-619
Web/packages/core/dist/index.js
Web/packages/core/dist/index.js
+128
-65
Web/packages/core/package.json
Web/packages/core/package.json
+3
-1
Web/packages/core/src/common/directives/dragable.js
Web/packages/core/src/common/directives/dragable.js
+0
-98
Web/packages/core/src/components/app.vue
Web/packages/core/src/components/app.vue
+12
-4
Web/packages/utils/dist/index.js
Web/packages/utils/dist/index.js
+166
-5
Web/packages/utils/package.json
Web/packages/utils/package.json
+1
-1
Web/packages/utils/src/dragable.js
Web/packages/utils/src/dragable.js
+153
-0
Web/packages/utils/src/index.js
Web/packages/utils/src/index.js
+2
-1
Web/packages/utils/src/utils.js
Web/packages/utils/src/utils.js
+11
-4
Web/packages/web/dist/dokit.js
Web/packages/web/dist/dokit.js
+806
-298
Web/packages/web/package.json
Web/packages/web/package.json
+2
-1
Web/packages/web/src/common/Card.vue
Web/packages/web/src/common/Card.vue
+7
-4
Web/packages/web/src/common/directives/dragable.js
Web/packages/web/src/common/directives/dragable.js
+0
-98
Web/packages/web/src/common/info-card.vue
Web/packages/web/src/common/info-card.vue
+176
-0
Web/packages/web/src/feature.js
Web/packages/web/src/feature.js
+9
-11
Web/packages/web/src/plugins/app-info/ToolAppInfo.vue
Web/packages/web/src/plugins/app-info/ToolAppInfo.vue
+17
-14
Web/packages/web/src/plugins/demo-plugin/index.js
Web/packages/web/src/plugins/demo-plugin/index.js
+1
-1
Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
...web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
+19
-13
Web/packages/web/src/plugins/storage/cookie.vue
Web/packages/web/src/plugins/storage/cookie.vue
+39
-0
Web/packages/web/src/plugins/storage/index.js
Web/packages/web/src/plugins/storage/index.js
+12
-0
Web/packages/web/src/plugins/storage/js/storage.js
Web/packages/web/src/plugins/storage/js/storage.js
+70
-0
Web/packages/web/src/plugins/storage/local-storage.vue
Web/packages/web/src/plugins/storage/local-storage.vue
+47
-0
Web/packages/web/src/plugins/storage/main.vue
Web/packages/web/src/plugins/storage/main.vue
+25
-0
Web/packages/web/src/plugins/storage/session-storage.vue
Web/packages/web/src/plugins/storage/session-storage.vue
+47
-0
未找到文件。
Web/packages/core/dist/index.js
浏览文件 @
7737a802
...
...
@@ -3,100 +3,155 @@ import { pushScopeId, popScopeId, openBlock, createBlock, withDirectives, create
/**
* 拖拽指令 v-dragable
* 减少外部依赖
* 默认使用v-dragable
* 也接受传入一个config对象 v-dragable="config"
* config支持 name opacity left top safeBottom 等属性
*/
const
INIT_VALUE
=
9999
;
const
DEFAULT_OPACITY
=
0.5
;
const
SAFE_BOTTOM
=
50
;
// 底部防误触
// const SAFE_BOTTOM = 50 // 底部防误触
let
MOUSE_DOWN_FLAG
=
false
;
const
DEFAULT_EL_CONF
=
{
name
:
''
,
// 名称 用于存储位置storage的标识,没有则不存储
opacity
:
1
,
// 默认透明度
left
:
''
,
// 初始位置, 没有则居中
top
:
''
,
// 初始位置, 没有则居中
safeBottom
:
0
};
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
var
dragable
=
{
mounted
(
el
)
{
const
dragable
=
{
mounted
(
el
,
binding
)
{
el
.
config
=
{
...
DEFAULT_EL_CONF
,
...
binding
.
value
};
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
;
el
.
dokitEntryLastY
=
INIT_VALUE
;
// 初始化样式
el
.
style
.
position
=
'
fixed
'
;
el
.
style
.
opacity
=
DEFAULT_OPACITY
;
el
.
dokitPositionLeft
=
getDefaultX
();
el
.
dokitPositionTop
=
getDefaultY
();
el
.
style
.
opacity
=
el
.
config
.
opacity
;
el
.
dokitPositionLeft
=
getDefaultX
(
el
);
el
.
dokitPositionTop
=
getDefaultY
(
el
);
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
adjustPosition
(
el
);
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
el
.
style
.
opacity
=
1
;
moveStart
(
el
)
;
};
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
();
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
;
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
;
return
}
el
.
dokitPositionTop
+=
(
e
.
touches
[
0
].
clientY
-
el
.
dokitEntryLastY
);
el
.
dokitPositionLeft
+=
(
e
.
touches
[
0
].
clientX
-
el
.
dokitEntryLastX
);
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
;
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
;
el
.
style
.
top
=
`
${
getAvailableTop
(
el
)}
px`
;
el
.
style
.
left
=
`
${
getAvailableLeft
(
el
)}
px`
;
moving
(
el
,
e
);
};
el
.
ontouchend
=
(
e
)
=>
{
setTimeout
(()
=>
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
else
if
(
el
.
dokitPositionLeft
+
e
.
target
.
clientWidth
>
window
.
screen
.
availWidth
)
{
el
.
dokitPositionLeft
=
window
.
screen
.
availWidth
-
e
.
target
.
clientWidth
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
moveEnd
(
el
);
};
// PC鼠标事件
el
.
onmousedown
=
(
e
)
=>
{
e
.
preventDefault
();
moveStart
(
el
);
MOUSE_DOWN_FLAG
=
true
;
};
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
window
.
addEventListener
(
'
mousemove
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
moving
(
el
,
e
);
});
}
else
if
(
el
.
dokitPositionTop
+
e
.
target
.
clientHeight
+
SAFE_BOTTOM
>
window
.
screen
.
availHeight
)
{
el
.
dokitPositionTop
=
window
.
screen
.
availHeight
-
e
.
target
.
clientHeight
-
SAFE_BOTTOM
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
window
.
addEventListener
(
'
mouseup
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
{
moveEnd
(
el
);
MOUSE_DOWN_FLAG
=
false
;
}
});
}
localStorage
.
setItem
(
'
dokitPositionTop
'
,
el
.
dokitPositionTop
);
localStorage
.
setItem
(
'
dokitPositionLeft
'
,
el
.
dokitPositionLeft
);
},
100
);
el
.
dokitEntryLastX
=
INIT_VALUE
;
el
.
dokitEntryLastY
=
INIT_VALUE
;
el
.
style
.
opacity
=
0.5
;
};
window
.
addEventListener
(
'
resize
'
,
()
=>
{
adjustPosition
(
el
);
});
}
};
function
getDefaultX
(
el
){
let
defaultX
=
Math
.
round
(
window
.
outerWidth
/
2
);
return
localStorage
.
getItem
(
'
dokitPositionLeft
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionLeft
'
))
:
defaultX
function
moveStart
(
el
)
{
el
.
style
.
opacity
=
1
;
}
function
getDefaultY
(
el
){
let
defaultY
=
Math
.
round
(
window
.
outerHeight
/
2
);
return
localStorage
.
getItem
(
'
dokitPositionTop
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionTop
'
))
:
defaultY
function
moving
(
el
,
e
)
{
let
target
=
e
.
touches
?
e
.
touches
[
0
]
:
e
;
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
target
.
clientX
;
el
.
dokitEntryLastY
=
target
.
clientY
;
return
}
el
.
dokitPositionTop
+=
(
target
.
clientY
-
el
.
dokitEntryLastY
);
el
.
dokitPositionLeft
+=
(
target
.
clientX
-
el
.
dokitEntryLastX
);
el
.
dokitEntryLastX
=
target
.
clientX
;
el
.
dokitEntryLastY
=
target
.
clientY
;
// el.style.top = `${getAvailableTop(el)}px`
// el.style.left = `${getAvailableLeft(el)}px`
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
function
getAvailableLeft
(
el
){
return
standardNumber
(
el
.
dokitPositionLeft
,
window
.
outerWidth
-
el
.
clientWidth
)
function
moveEnd
(
el
,
e
)
{
setTimeout
(()
=>
{
adjustPosition
(
el
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionTop
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionLeft
);
},
100
);
el
.
dokitEntryLastX
=
INIT_VALUE
;
el
.
dokitEntryLastY
=
INIT_VALUE
;
el
.
style
.
opacity
=
el
.
config
.
opacity
;
}
function
getAvailableTop
(
el
){
return
standardNumber
(
el
.
dokitPositionTop
,
window
.
outerHeight
-
el
.
clientHeight
)
function
getDefaultX
(
el
){
let
defaultX
=
el
.
config
.
left
||
Math
.
round
(
window
.
innerWidth
/
2
);
return
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
el
.
config
.
top
||
Math
.
round
(
window
.
innerHeight
/
2
);
return
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
))
:
defaultY
}
function
standardNumber
(
number
,
max
){
if
(
number
<
0
){
return
0
// function getAvailableLeft(el){
// return standardNumber(el.dokitPositionLeft, window.innerWidth - el.clientWidth)
// }
// function getAvailableTop(el){
// return standardNumber(el.dokitPositionTop, window.innerHeight - el.clientHeight)
// }
// function standardNumber(number, max){
// if(number < 0){
// return 0
// }
// if(number >= max){
// return max
// }
// return number
// }
function
adjustPosition
(
el
)
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
else
if
(
el
.
dokitPositionLeft
+
el
.
getBoundingClientRect
().
width
>
window
.
innerWidth
)
{
el
.
dokitPositionLeft
=
window
.
innerWidth
-
el
.
getBoundingClientRect
().
width
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
if
(
number
>=
max
){
return
max
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
}
else
if
(
el
.
dokitPositionTop
+
el
.
getBoundingClientRect
().
height
+
el
.
config
.
safeBottom
>
window
.
innerHeight
)
{
el
.
dokitPositionTop
=
window
.
innerHeight
-
el
.
getBoundingClientRect
().
height
-
el
.
config
.
safeBottom
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
}
return
number
}
const
IconBack
=
'
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAzCAMAAADIDVqJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAXFQTFRFAAAANX7GNHzFM3zFM3zFNn3ENYDHNHzFM3zENIDHNH7INH3ENX3GNn7GM33ENYDFNYDGM4DINH7HM3zENH3HNHzENYDGM37FM33FNH3FNn3FNX7HN4DINHzEM33HNH7FNIDGNn7GM33ENX3FNXzHNoDENH7FNH3EM3zEN33INHzFNH3FM4DHNX3HNH3GNX7ENHzENHzFNYDFNH3FM33ENn3JM33GN4DINX7EM3zEM33GNH7FM33FM33FNIDFNH3GNX3KM37HNHzFN4DINX7FNH3EOHzHNH3GM3zFM4DGM33EM3zENHzENH3EM33FOoTFgID/NHzFOIDHM3zEM3zFNoPJM33FM33ENH3FNHzENYDL////NHzENH3FM4PFM3zFOYDGNH3FM3zFN3zINHzEM33FNoDJM3zFM33FNH3ENHzFM37FNH3ENH3FM33ENH7GNX7FM33ENH3FNH7FM37ENH7FM3zFNH3EM4jMM3zE////TdHL6gAAAHl0Uk5TAEPy+vA9RPb0QEX3P0fzPkg8Sfg7SjpL+fE5TThON082Ue81UjRT++4zVO0yVjFX/OwwWOsvWi5b6i1d/eksXitf6Cph5yli/ihk5ieh3x8CoiCg4CGf4Z3iIgGc4yOaJJnkJZjlJpaVk5KQj42LioiHhYSCgHOyD3AmCqsAAAABYktHRFt0vJU0AAAACXBIWXMAAABIAAAASABGyWs+AAABPUlEQVQ4y43UxVoCUBQE4Ctgd3cXKAYoKqioINiBrdjdXby9C+6c3ZzPWf+rE2MMS4bDmY4rk5qs7FQ6ObnU5OXDFFBTCFNUTE2JmFJqysqtcVRQUymmiprqGmtq66ipF9NATSOMq4maZidMCzWtMG3t1HSI6aSmq9sat4eaHpheLzV9YvqpGRi0xuenZghmOEDNiJhRasZggiFqxiesmQxTMyVmmpoZmEiUmlmYWJyauXmYBWoWYZaWqTEr1qRW1zhaT4jaUNQm1Na2onagdjW1B7V/wFXyEOroWFEnok4VdQZ1fqGoS6ira0XdpP4x+uStKL5EY+6gYpq6h4rEFfUgKqqoRyjlkI15ggqGFfUsKqSoFyjlTY15hfIFFPUmyq+odyilhIz5gHJ7FfUpyqOoLyilYo35/rFJ/Jo/DZ3bT7fEcIgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDQtMjFUMTc6MzI6MjgrMDg6MDBBnT5hAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA0LTIxVDE3OjMyOjI4KzA4OjAwMMCG3QAAAABJRU5ErkJggg==
'
;
...
...
@@ -370,7 +425,15 @@ var script$3 = {
dragable
,
},
data
()
{
return
{};
return
{
btnConfig
:
{
name
:
'
dokit_entry
'
,
opacity
:
0.5
,
left
:
window
.
innerWidth
-
50
,
top
:
window
.
innerHeight
-
100
,
safeBottom
:
50
}
};
},
computed
:
{
state
(){
...
...
@@ -410,7 +473,7 @@ const render$3 = /*#__PURE__*/_withId$3((_ctx, _cache, $props, $setup, $data, $o
style
:
{
"
z-index
"
:
"
10000
"
},
onClick
:
_cache
[
1
]
||
(
_cache
[
1
]
=
(...
args
)
=>
(
$options
.
toggleShowContainer
&&
$options
.
toggleShowContainer
(...
args
)))
},
null
,
512
/* NEED_PATCH */
),
[
[
_directive_dragable
]
[
_directive_dragable
,
$data
.
btnConfig
]
]),
withDirectives
(
createVNode
(
"
div
"
,
{
class
:
"
mask
"
,
...
...
Web/packages/core/package.json
浏览文件 @
7737a802
...
...
@@ -28,6 +28,8 @@
"bugs"
:
{
"url"
:
"https://github.com/didi/DoraemonKit/issues"
},
"dependencies"
:
{},
"dependencies"
:
{
"@dokit/web-utils"
:
"^0.0.1-alpha.0"
},
"gitHead"
:
"886ea7c19806526668e5da0179da335e7df9d012"
}
Web/packages/core/src/common/directives/dragable.js
已删除
100644 → 0
浏览文件 @
268ee3e0
/**
* 拖拽指令 v-dragable
* 减少外部依赖
*/
const
INIT_VALUE
=
9999
const
DEFAULT_OPACITY
=
0.5
const
SAFE_BOTTOM
=
50
// 底部防误触
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
export
default
{
mounted
(
el
)
{
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
// 初始化样式
el
.
style
.
position
=
'
fixed
'
el
.
style
.
opacity
=
DEFAULT_OPACITY
el
.
dokitPositionLeft
=
getDefaultX
(
el
)
el
.
dokitPositionTop
=
getDefaultY
(
el
)
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
el
.
style
.
opacity
=
1
}
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
()
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
return
}
el
.
dokitPositionTop
+=
(
e
.
touches
[
0
].
clientY
-
el
.
dokitEntryLastY
)
el
.
dokitPositionLeft
+=
(
e
.
touches
[
0
].
clientX
-
el
.
dokitEntryLastX
)
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
el
.
style
.
top
=
`
${
getAvailableTop
(
el
)}
px`
el
.
style
.
left
=
`
${
getAvailableLeft
(
el
)}
px`
}
el
.
ontouchend
=
(
e
)
=>
{
setTimeout
(()
=>
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
else
if
(
el
.
dokitPositionLeft
+
e
.
target
.
clientWidth
>
window
.
screen
.
availWidth
)
{
el
.
dokitPositionLeft
=
window
.
screen
.
availWidth
-
e
.
target
.
clientWidth
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
else
if
(
el
.
dokitPositionTop
+
e
.
target
.
clientHeight
+
SAFE_BOTTOM
>
window
.
screen
.
availHeight
)
{
el
.
dokitPositionTop
=
window
.
screen
.
availHeight
-
e
.
target
.
clientHeight
-
SAFE_BOTTOM
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
localStorage
.
setItem
(
'
dokitPositionTop
'
,
el
.
dokitPositionTop
);
localStorage
.
setItem
(
'
dokitPositionLeft
'
,
el
.
dokitPositionLeft
);
},
100
)
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
el
.
style
.
opacity
=
0.5
}
}
}
function
getDefaultX
(
el
){
let
defaultX
=
Math
.
round
(
window
.
outerWidth
/
2
)
return
localStorage
.
getItem
(
'
dokitPositionLeft
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionLeft
'
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
Math
.
round
(
window
.
outerHeight
/
2
)
return
localStorage
.
getItem
(
'
dokitPositionTop
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionTop
'
))
:
defaultY
}
function
getAvailableLeft
(
el
){
return
standardNumber
(
el
.
dokitPositionLeft
,
window
.
outerWidth
-
el
.
clientWidth
)
}
function
getAvailableTop
(
el
){
return
standardNumber
(
el
.
dokitPositionTop
,
window
.
outerHeight
-
el
.
clientHeight
)
}
function
standardNumber
(
number
,
max
){
if
(
number
<
0
){
return
0
}
if
(
number
>=
max
){
return
max
}
return
number
}
\ No newline at end of file
Web/packages/core/src/components/app.vue
浏览文件 @
7737a802
<
template
>
<div
class=
"dokit-app"
>
<div
class=
"dokit-entry-btn"
style=
"z-index: 10000;"
v-dragable
@
click=
"toggleShowContainer"
></div>
<div
class=
"dokit-entry-btn"
style=
"z-index: 10000;"
v-dragable
=
"btnConfig"
@
click=
"toggleShowContainer"
></div>
<div
class=
"mask"
v-show=
"showContainer"
@
click=
"toggleContainer"
></div>
<router-container
v-show=
"showContainer"
></router-container>
<independ-container
v-show=
"independPlugins.length"
></independ-container>
...
...
@@ -8,10 +8,10 @@
</
template
>
<
script
>
import
dragable
from
"
@common/directives/dragable
"
;
import
{
dragable
}
from
'
@dokit/web-utils
'
;
import
RouterContainer
from
'
./router-container
'
;
import
IndependContainer
from
'
./independ-container
'
;
import
{
toggleContainer
}
from
'
@store/index
'
;
import
{
toggleContainer
}
from
'
@store/index
'
;
export
default
{
components
:
{
...
...
@@ -22,7 +22,15 @@ export default {
dragable
,
},
data
()
{
return
{};
return
{
btnConfig
:
{
name
:
'
dokit_entry
'
,
opacity
:
0.5
,
left
:
window
.
innerWidth
-
50
,
top
:
window
.
innerHeight
-
100
,
safeBottom
:
50
}
};
},
computed
:
{
state
(){
...
...
Web/packages/utils/dist/index.js
浏览文件 @
7737a802
const
isObject
=
function
(
obj
)
{
return
Object
.
prototype
.
toString
.
call
(
obj
)
===
'
[object Object]
'
const
isObject
=
function
(
obj
)
{
return
Object
.
prototype
.
toString
.
call
(
obj
)
===
'
[object Object]
'
};
const
isFunction
=
function
(
obj
){
return
typeof
obj
===
'
function
'
const
isFunction
=
function
(
obj
)
{
return
typeof
obj
===
'
function
'
};
const
isMobile
=
function
()
{
if
(
window
.
navigator
.
userAgent
.
match
(
/
(
phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone
)
/i
))
{
return
true
}
return
false
};
const
inBrowser
=
typeof
window
!==
'
undefined
'
;
export
{
inBrowser
,
isFunction
,
isObject
};
/**
* 拖拽指令 v-dragable
* 减少外部依赖
* 默认使用v-dragable
* 也接受传入一个config对象 v-dragable="config"
* config支持 name opacity left top safeBottom 等属性
*/
const
INIT_VALUE
=
9999
;
// const SAFE_BOTTOM = 50 // 底部防误触
let
MOUSE_DOWN_FLAG
=
false
;
const
DEFAULT_EL_CONF
=
{
name
:
''
,
// 名称 用于存储位置storage的标识,没有则不存储
opacity
:
1
,
// 默认透明度
left
:
''
,
// 初始位置, 没有则居中
top
:
''
,
// 初始位置, 没有则居中
safeBottom
:
0
};
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
const
dragable
=
{
mounted
(
el
,
binding
)
{
el
.
config
=
{
...
DEFAULT_EL_CONF
,
...
binding
.
value
};
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
;
el
.
dokitEntryLastY
=
INIT_VALUE
;
// 初始化样式
el
.
style
.
position
=
'
fixed
'
;
el
.
style
.
opacity
=
el
.
config
.
opacity
;
el
.
dokitPositionLeft
=
getDefaultX
(
el
);
el
.
dokitPositionTop
=
getDefaultY
(
el
);
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
adjustPosition
(
el
);
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
moveStart
(
el
);
};
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
();
moving
(
el
,
e
);
};
el
.
ontouchend
=
(
e
)
=>
{
moveEnd
(
el
);
};
// PC鼠标事件
el
.
onmousedown
=
(
e
)
=>
{
e
.
preventDefault
();
moveStart
(
el
);
MOUSE_DOWN_FLAG
=
true
;
};
window
.
addEventListener
(
'
mousemove
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
moving
(
el
,
e
);
});
window
.
addEventListener
(
'
mouseup
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
{
moveEnd
(
el
);
MOUSE_DOWN_FLAG
=
false
;
}
});
window
.
addEventListener
(
'
resize
'
,
()
=>
{
adjustPosition
(
el
);
});
}
};
function
moveStart
(
el
)
{
el
.
style
.
opacity
=
1
;
}
function
moving
(
el
,
e
)
{
let
target
=
e
.
touches
?
e
.
touches
[
0
]
:
e
;
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
target
.
clientX
;
el
.
dokitEntryLastY
=
target
.
clientY
;
return
}
el
.
dokitPositionTop
+=
(
target
.
clientY
-
el
.
dokitEntryLastY
);
el
.
dokitPositionLeft
+=
(
target
.
clientX
-
el
.
dokitEntryLastX
);
el
.
dokitEntryLastX
=
target
.
clientX
;
el
.
dokitEntryLastY
=
target
.
clientY
;
// el.style.top = `${getAvailableTop(el)}px`
// el.style.left = `${getAvailableLeft(el)}px`
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
function
moveEnd
(
el
,
e
)
{
setTimeout
(()
=>
{
adjustPosition
(
el
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionTop
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionLeft
);
},
100
);
el
.
dokitEntryLastX
=
INIT_VALUE
;
el
.
dokitEntryLastY
=
INIT_VALUE
;
el
.
style
.
opacity
=
el
.
config
.
opacity
;
}
function
getDefaultX
(
el
){
let
defaultX
=
el
.
config
.
left
||
Math
.
round
(
window
.
innerWidth
/
2
);
return
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
el
.
config
.
top
||
Math
.
round
(
window
.
innerHeight
/
2
);
return
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
))
:
defaultY
}
// function getAvailableLeft(el){
// return standardNumber(el.dokitPositionLeft, window.innerWidth - el.clientWidth)
// }
// function getAvailableTop(el){
// return standardNumber(el.dokitPositionTop, window.innerHeight - el.clientHeight)
// }
// function standardNumber(number, max){
// if(number < 0){
// return 0
// }
// if(number >= max){
// return max
// }
// return number
// }
function
adjustPosition
(
el
)
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
else
if
(
el
.
dokitPositionLeft
+
el
.
getBoundingClientRect
().
width
>
window
.
innerWidth
)
{
el
.
dokitPositionLeft
=
window
.
innerWidth
-
el
.
getBoundingClientRect
().
width
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
}
else
if
(
el
.
dokitPositionTop
+
el
.
getBoundingClientRect
().
height
+
el
.
config
.
safeBottom
>
window
.
innerHeight
)
{
el
.
dokitPositionTop
=
window
.
innerHeight
-
el
.
getBoundingClientRect
().
height
-
el
.
config
.
safeBottom
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
}
}
export
{
dragable
,
inBrowser
,
isFunction
,
isMobile
,
isObject
};
Web/packages/utils/package.json
浏览文件 @
7737a802
...
...
@@ -8,7 +8,7 @@
"author"
:
"duanlikang <duanlikang@didichuxing.com>"
,
"homepage"
:
"https://github.com/didi/DoraemonKit#readme"
,
"license"
:
"ISC"
,
"main"
:
"dist/
main
.js"
,
"main"
:
"dist/
index
.js"
,
"directories"
:
{
"lib"
:
"lib"
,
"test"
:
"__tests__"
...
...
Web/packages/utils/src/dragable.js
0 → 100644
浏览文件 @
7737a802
/**
* 拖拽指令 v-dragable
* 减少外部依赖
* 默认使用v-dragable
* 也接受传入一个config对象 v-dragable="config"
* config支持 name opacity left top safeBottom 等属性
*/
const
INIT_VALUE
=
9999
// const SAFE_BOTTOM = 50 // 底部防误触
let
MOUSE_DOWN_FLAG
=
false
const
DEFAULT_EL_CONF
=
{
name
:
''
,
// 名称 用于存储位置storage的标识,没有则不存储
opacity
:
1
,
// 默认透明度
left
:
''
,
// 初始位置, 没有则居中
top
:
''
,
// 初始位置, 没有则居中
safeBottom
:
0
}
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
export
const
dragable
=
{
mounted
(
el
,
binding
)
{
el
.
config
=
{
...
DEFAULT_EL_CONF
,
...
binding
.
value
}
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
// 初始化样式
el
.
style
.
position
=
'
fixed
'
el
.
style
.
opacity
=
el
.
config
.
opacity
el
.
dokitPositionLeft
=
getDefaultX
(
el
)
el
.
dokitPositionTop
=
getDefaultY
(
el
)
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
adjustPosition
(
el
);
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
moveStart
(
el
)
}
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
()
moving
(
el
,
e
)
}
el
.
ontouchend
=
(
e
)
=>
{
moveEnd
(
el
,
e
)
}
// PC鼠标事件
el
.
onmousedown
=
(
e
)
=>
{
e
.
preventDefault
()
moveStart
(
el
)
MOUSE_DOWN_FLAG
=
true
}
window
.
addEventListener
(
'
mousemove
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
moving
(
el
,
e
)
})
window
.
addEventListener
(
'
mouseup
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
{
moveEnd
(
el
,
e
)
MOUSE_DOWN_FLAG
=
false
}
})
window
.
addEventListener
(
'
resize
'
,
()
=>
{
adjustPosition
(
el
)
})
}
}
function
moveStart
(
el
)
{
el
.
style
.
opacity
=
1
}
function
moving
(
el
,
e
)
{
let
target
=
e
.
touches
?
e
.
touches
[
0
]
:
e
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
target
.
clientX
el
.
dokitEntryLastY
=
target
.
clientY
return
}
el
.
dokitPositionTop
+=
(
target
.
clientY
-
el
.
dokitEntryLastY
)
el
.
dokitPositionLeft
+=
(
target
.
clientX
-
el
.
dokitEntryLastX
)
el
.
dokitEntryLastX
=
target
.
clientX
el
.
dokitEntryLastY
=
target
.
clientY
// el.style.top = `${getAvailableTop(el)}px`
// el.style.left = `${getAvailableLeft(el)}px`
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
function
moveEnd
(
el
,
e
)
{
setTimeout
(()
=>
{
adjustPosition
(
el
)
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionTop
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionLeft
);
},
100
)
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
el
.
style
.
opacity
=
el
.
config
.
opacity
}
function
getDefaultX
(
el
){
let
defaultX
=
el
.
config
.
left
||
Math
.
round
(
window
.
innerWidth
/
2
)
return
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
el
.
config
.
top
||
Math
.
round
(
window
.
innerHeight
/
2
)
return
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
))
:
defaultY
}
// function getAvailableLeft(el){
// return standardNumber(el.dokitPositionLeft, window.innerWidth - el.clientWidth)
// }
// function getAvailableTop(el){
// return standardNumber(el.dokitPositionTop, window.innerHeight - el.clientHeight)
// }
// function standardNumber(number, max){
// if(number < 0){
// return 0
// }
// if(number >= max){
// return max
// }
// return number
// }
function
adjustPosition
(
el
)
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
else
if
(
el
.
dokitPositionLeft
+
el
.
getBoundingClientRect
().
width
>
window
.
innerWidth
)
{
el
.
dokitPositionLeft
=
window
.
innerWidth
-
el
.
getBoundingClientRect
().
width
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
else
if
(
el
.
dokitPositionTop
+
el
.
getBoundingClientRect
().
height
+
el
.
config
.
safeBottom
>
window
.
innerHeight
)
{
el
.
dokitPositionTop
=
window
.
innerHeight
-
el
.
getBoundingClientRect
().
height
-
el
.
config
.
safeBottom
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
}
\ No newline at end of file
Web/packages/utils/src/index.js
浏览文件 @
7737a802
export
*
from
'
./utils
'
export
*
from
'
./dom
'
\ No newline at end of file
export
*
from
'
./dom
'
export
*
from
'
./dragable
'
\ No newline at end of file
Web/packages/utils/src/utils.js
浏览文件 @
7737a802
export
const
isObject
=
function
(
obj
)
{
return
Object
.
prototype
.
toString
.
call
(
obj
)
===
'
[object Object]
'
export
const
isObject
=
function
(
obj
)
{
return
Object
.
prototype
.
toString
.
call
(
obj
)
===
'
[object Object]
'
}
export
const
isFunction
=
function
(
obj
){
return
typeof
obj
===
'
function
'
export
const
isFunction
=
function
(
obj
)
{
return
typeof
obj
===
'
function
'
}
export
const
isMobile
=
function
()
{
if
(
window
.
navigator
.
userAgent
.
match
(
/
(
phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone
)
/i
))
{
return
true
}
return
false
}
\ No newline at end of file
Web/packages/web/dist/dokit.js
浏览文件 @
7737a802
此差异已折叠。
点击以展开。
Web/packages/web/package.json
浏览文件 @
7737a802
...
...
@@ -30,7 +30,8 @@
"dev"
:
"npx rollup -wc"
},
"dependencies"
:
{
"@dokit/web-core"
:
"^0.0.1-alpha.0"
"@dokit/web-core"
:
"^0.0.1-alpha.0"
,
"@dokit/web-utils"
:
"^0.0.1-alpha.0"
},
"gitHead"
:
"886ea7c19806526668e5da0179da335e7df9d012"
}
Web/packages/web/src/common/Card.vue
浏览文件 @
7737a802
...
...
@@ -15,16 +15,19 @@ export default {
</
script
>
<
style
lang=
"less"
>
.dokit-card {
border-radius: 10px;
background-color: #d9e1e8;
border-radius: 5px;
box-shadow: 0 8px 12px #ebedf0;
overflow: hidden;
.dokit-card__header{
background-color: #
337cc4
;
padding:
10
px;
background-color: #
2b90d9
;
padding:
5
px;
color: #fff;
font-weight: bold;
font-style: italic;
}
.dokit-card__body{
padding:
10
px;
padding:
5
px;
}
}
</
style
>
\ No newline at end of file
Web/packages/web/src/common/directives/dragable.js
已删除
100644 → 0
浏览文件 @
268ee3e0
/**
* 拖拽指令 v-dragable
* 减少外部依赖
*/
const
INIT_VALUE
=
9999
const
DEFAULT_OPACITY
=
0.5
const
SAFE_BOTTOM
=
50
// 底部防误触
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
export
default
{
mounted
(
el
)
{
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
// 初始化样式
el
.
style
.
position
=
'
fixed
'
el
.
style
.
opacity
=
DEFAULT_OPACITY
el
.
dokitPositionLeft
=
getDefaultX
(
el
)
el
.
dokitPositionTop
=
getDefaultY
(
el
)
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
el
.
style
.
opacity
=
1
}
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
()
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
return
}
el
.
dokitPositionTop
+=
(
e
.
touches
[
0
].
clientY
-
el
.
dokitEntryLastY
)
el
.
dokitPositionLeft
+=
(
e
.
touches
[
0
].
clientX
-
el
.
dokitEntryLastX
)
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
el
.
style
.
top
=
`
${
getAvailableTop
(
el
)}
px`
el
.
style
.
left
=
`
${
getAvailableLeft
(
el
)}
px`
}
el
.
ontouchend
=
(
e
)
=>
{
setTimeout
(()
=>
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
else
if
(
el
.
dokitPositionLeft
+
e
.
target
.
clientWidth
>
window
.
screen
.
availWidth
)
{
el
.
dokitPositionLeft
=
window
.
screen
.
availWidth
-
e
.
target
.
clientWidth
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
else
if
(
el
.
dokitPositionTop
+
e
.
target
.
clientHeight
+
SAFE_BOTTOM
>
window
.
screen
.
availHeight
)
{
el
.
dokitPositionTop
=
window
.
screen
.
availHeight
-
e
.
target
.
clientHeight
-
SAFE_BOTTOM
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
localStorage
.
setItem
(
'
dokitPositionTop
'
,
el
.
dokitPositionTop
);
localStorage
.
setItem
(
'
dokitPositionLeft
'
,
el
.
dokitPositionLeft
);
},
100
)
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
el
.
style
.
opacity
=
0.5
}
}
}
function
getDefaultX
(
el
){
let
defaultX
=
Math
.
round
(
window
.
outerWidth
/
2
)
return
localStorage
.
getItem
(
'
dokitPositionLeft
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionLeft
'
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
Math
.
round
(
window
.
outerHeight
/
2
)
return
localStorage
.
getItem
(
'
dokitPositionTop
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionTop
'
))
:
defaultY
}
function
getAvailableLeft
(
el
){
return
standardNumber
(
el
.
dokitPositionLeft
,
window
.
outerWidth
-
el
.
clientWidth
)
}
function
getAvailableTop
(
el
){
return
standardNumber
(
el
.
dokitPositionTop
,
window
.
outerHeight
-
el
.
clientHeight
)
}
function
standardNumber
(
number
,
max
){
if
(
number
<
0
){
return
0
}
if
(
number
>=
max
){
return
max
}
return
number
}
\ No newline at end of file
Web/packages/web/src/common/info-card.vue
0 → 100644
浏览文件 @
7737a802
此差异已折叠。
点击以展开。
Web/packages/web/src/feature.js
浏览文件 @
7737a802
import
Console
from
'
./plugins/console/index
'
import
AppInfo
from
'
./plugins/app-info/index
'
import
Storage
from
'
./plugins/storage/index
'
import
DemoPlugin
from
'
./plugins/demo-plugin/index
'
import
DemoIndependPlugin
from
'
./plugins/demo-single-plugin/index
'
import
H5DoorPlugin
from
'
./plugins/h5-door/index
'
import
HelloWorld
from
'
./components/ToolHelloWorld
'
import
{
IndependPlugin
,
RouterPlugin
}
from
'
@dokit/web-core
'
export
const
BasicFeatures
=
{
title
:
'
常用工具
'
,
list
:
[
Console
,
AppInfo
,
DemoPlugin
,
DemoIndependPlugin
,
H5DoorPlugin
]
list
:
[
Console
,
AppInfo
,
Storage
,
DemoPlugin
,
DemoIndependPlugin
,
H5DoorPlugin
]
}
export
const
DokitFeatures
=
{
title
:
'
平台功能
'
,
list
:
[{
list
:
[
new
RouterPlugin
(
{
nameZh
:
'
Mock数据
'
,
name
:
'
mock
'
,
icon
:
'
https://pt-starimg.didistatic.com/static/starimg/img/aDn77poRDB1618997545078.png
'
,
component
:
HelloWorld
}]
}
)
]
}
export
const
UIFeatures
=
{
title
:
'
视觉功能
'
,
list
:
[{
nameZh
:
'
取色器
'
,
name
:
'
color-selector
'
,
icon
:
'
https://pt-starimg.didistatic.com/static/starimg/img/QYUvEE8FnN1618997536890.png
'
,
component
:
HelloWorld
},
{
list
:
[
new
RouterPlugin
({
nameZh
:
'
对齐标尺
'
,
name
:
'
align-ruler
'
,
icon
:
'
https://pt-starimg.didistatic.com/static/starimg/img/a5UTjMn6lO1618997535798.png
'
,
component
:
HelloWorld
}
,
{
}
),
new
RouterPlugin
(
{
nameZh
:
'
UI结构
'
,
name
:
'
view-selector
'
,
icon
:
'
https://pt-starimg.didistatic.com/static/starimg/img/XNViIWzG7N1618997548483.png
'
,
component
:
HelloWorld
}]
}
)
]
}
export
const
Features
=
[
BasicFeatures
,
DokitFeatures
,
UIFeatures
]
\ No newline at end of file
Web/packages/web/src/plugins/app-info/ToolAppInfo.vue
浏览文件 @
7737a802
...
...
@@ -2,32 +2,32 @@
<div
class=
"app-info-container"
>
<div
class=
"info-wrapper"
>
<Card
title=
"Page Info"
>
<table
border=
"1"
>
<table>
<tr>
<td>
UA
</td>
<td>
{{
ua
}}
</td>
<td
class=
"key"
>
UA
</td>
<td
class=
"value"
>
{{
ua
}}
</td>
</tr>
<tr>
<td>
URL
</td>
<td>
{{
url
}}
</td>
<td
class=
"key"
>
URL
</td>
<td
class=
"value"
>
{{
url
}}
</td>
</tr>
</table>
</Card>
</div>
<div
class=
"info-wrapper"
>
<div
class=
"info-wrapper"
style=
"margin-top:20px"
>
<Card
title=
"Device Info"
>
<table
border=
"1"
>
<table>
<tr>
<td>
设备缩放比
</td>
<td>
{{
ratio
}}
</td>
<td
class=
"key"
>
设备缩放比
</td>
<td
class=
"value"
>
{{
ratio
}}
</td>
</tr>
<tr>
<td>
screen
</td>
<td>
{{
screen
.
width
}}
X
{{
screen
.
height
}}
</td>
<td
class=
"key"
>
screen
</td>
<td>
{{
screen
.
width
}}
X
{{
screen
.
height
}}
</td>
</tr>
<tr>
<td>
viewport
</td>
<td>
{{
viewport
.
width
}}
X
{{
viewport
.
height
}}
</td>
<td
class=
"key"
>
viewport
</td>
<td>
{{
viewport
.
width
}}
X
{{
viewport
.
height
}}
</td>
</tr>
</table>
</Card>
...
...
@@ -62,7 +62,10 @@ export default {
overflow: hidden;
}
.info-wrapper{
margin: 20px 20px 0 20px;
margin: 5px 5px 0 5px;
.key{
font-weight: bold;
}
}
table{
border-color: #eee;
...
...
Web/packages/web/src/plugins/demo-plugin/index.js
浏览文件 @
7737a802
...
...
@@ -4,7 +4,7 @@ import {RouterPlugin} from '@dokit/web-core'
export
default
new
RouterPlugin
({
nameZh
:
'
测试
'
,
name
:
'
test
'
,
icon
:
'
https://pt-starimg.didistatic.com/static/starimg/img/
z1346TQD531618997547642
.png
'
,
icon
:
'
https://pt-starimg.didistatic.com/static/starimg/img/
6WONqJCVks1621926657356
.png
'
,
component
:
HelloWorld
})
Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
浏览文件 @
7737a802
<
template
>
<div
class=
"hello-world"
v-dragable
>
<div
style=
"font-weight:bold;font-size:30px;font-style:italic;"
>
Hello Dokit
</div>
<div
class=
"hello-independ"
v-dragable
>
<div
style=
"font-weight: bold; font-size: 30px; font-style: italic"
>
Hello Dokit
</div>
<div>
Demo Independ Plugin
</div>
<div
@
click=
"remove"
style=
"background-color: red;"
>
点击移除当前独立插件
</div>
<div
@
click=
"remove"
style=
"background-color: red; color:white;margin-top:10px"
>
点击移除当前独立插件
</div>
</div>
</
template
>
<
script
>
import
dragable
from
"
@common/directives/dragable
"
;
import
{
removeIndependPlugin
}
from
'
@dokit/web-core
'
;
import
{
dragable
}
from
"
@dokit/web-utils
"
;
import
{
removeIndependPlugin
}
from
"
@dokit/web-core
"
;
export
default
{
directives
:
{
...
...
@@ -16,18 +19,21 @@ export default {
},
methods
:
{
remove
()
{
removeIndependPlugin
(
'
test
'
)
}
}
}
removeIndependPlugin
(
"
test
"
);
}
,
}
,
}
;
</
script
>
<
style
>
.hello-
world
{
<
style
scoped
>
.hello-
independ
{
display
:
inline-block
;
padding
:
10px
;
width
:
200px
;
/* padding: 10px; */
text-align
:
center
;
background-color
:
white
;
border-radius
:
20px
;
box-shadow
:
0
8px
12px
#ebedf0
;
overflow
:
hidden
;
border
:
1px
solid
red
;
}
</
style
>
\ No newline at end of file
Web/packages/web/src/plugins/storage/cookie.vue
0 → 100644
浏览文件 @
7737a802
<
template
>
<div
style=
"margin-top:20px;"
>
<InfoCard
:infoMap=
"storageMap"
title=
"Cookie"
@
refresh=
"updateList"
@
clear=
"clear"
@
removeItem=
"removeItem"
></InfoCard>
</div>
</
template
>
<
script
>
import
InfoCard
from
'
@common/info-card
'
import
{
clearCookie
,
removeCookieItem
,
getCookieMap
}
from
'
./js/storage
'
export
default
{
components
:
{
InfoCard
},
data
()
{
return
{
storageMap
:
{}
}
},
created
()
{
this
.
updateList
()
},
methods
:
{
updateList
()
{
this
.
storageMap
=
getCookieMap
()
},
removeItem
(
key
)
{
removeCookieItem
(
key
)
this
.
updateList
()
},
clear
()
{
clearCookie
()
this
.
updateList
()
}
},
}
</
script
>
<
style
lang=
""
>
</
style
>
\ No newline at end of file
Web/packages/web/src/plugins/storage/index.js
0 → 100644
浏览文件 @
7737a802
import
Storage
from
'
./main.vue
'
// import {overrideConsole,restoreConsole} from './js/console'
import
{
getGlobalData
,
RouterPlugin
}
from
'
@dokit/web-core
'
export
default
new
RouterPlugin
({
name
:
'
Storage
'
,
nameZh
:
'
存储
'
,
component
:
Storage
,
icon
:
'
https://pt-starimg.didistatic.com/static/starimg/img/LM74BpA9bS1621926286444.png
'
,
onLoad
(){},
onUnload
(){}
})
\ No newline at end of file
Web/packages/web/src/plugins/storage/js/storage.js
0 → 100644
浏览文件 @
7737a802
export
const
overrideLocalStorage
=
function
(
callback
)
{
const
originSetItem
=
localStorage
.
setItem
.
bind
(
localStorage
);
localStorage
.
setItem
=
function
(
key
,
value
)
{
// if (!isStr(key) || !isStr(value)) return;
originSetItem
(
key
,
value
);
callback
({
type
:
'
setItem
'
})
};
const
originRemoveItem
=
localStorage
.
removeItem
.
bind
(
localStorage
);
localStorage
.
removeItem
=
function
(
key
)
{
originRemoveItem
(
key
);
callback
({
type
:
'
removeItem
'
})
};
const
originClear
=
localStorage
.
clear
.
bind
(
localStorage
);
localStorage
.
clear
=
function
(
key
)
{
originClear
();
callback
({
type
:
'
clear
'
})
};
}
export
const
overrideSessionStorage
=
function
(
callback
)
{
const
originSetItem
=
sessionStorage
.
setItem
.
bind
(
sessionStorage
);
sessionStorage
.
setItem
=
function
(
key
,
value
)
{
// if (!isStr(key) || !isStr(value)) return;
originSetItem
(
key
,
value
);
callback
({
type
:
'
setItem
'
})
};
const
originRemoveItem
=
sessionStorage
.
removeItem
.
bind
(
sessionStorage
);
sessionStorage
.
removeItem
=
function
(
key
)
{
originRemoveItem
(
key
);
callback
({
type
:
'
removeItem
'
})
};
const
originClear
=
sessionStorage
.
clear
.
bind
(
sessionStorage
);
sessionStorage
.
clear
=
function
(
key
)
{
originClear
();
callback
({
type
:
'
clear
'
})
};
}
export
const
clearCookie
=
function
()
{
let
cookieMap
=
getCookieMap
()
for
(
const
key
in
cookieMap
)
{
if
(
cookieMap
.
hasOwnProperty
.
call
(
cookieMap
,
key
))
{
removeCookieItem
(
key
)
}
}
}
export
const
removeCookieItem
=
function
(
key
)
{
document
.
cookie
=
encodeURIComponent
(
key
)
+
"
=; expires=Thu, 01 Jan 1970 00:00:00 GMT
"
;
}
export
const
getCookieMap
=
function
(
params
)
{
const
cookieMap
=
Object
.
create
({})
const
cookie
=
document
.
cookie
;
if
(
cookie
.
trim
()
!==
''
)
{
cookie
.
split
(
'
;
'
).
forEach
(
ele
=>
{
ele
=
ele
.
split
(
'
=
'
);
const
key
=
ele
.
shift
().
trim
();
ele
=
decodeURIComponent
(
ele
.
join
(
'
=
'
));
cookieMap
[
key
]
=
ele
})
}
return
cookieMap
;
}
Web/packages/web/src/plugins/storage/local-storage.vue
0 → 100644
浏览文件 @
7737a802
<
template
>
<div>
<InfoCard
:infoMap=
"storageMap"
title=
"localStorage"
@
refresh=
"updateList"
@
clear=
"clear"
@
removeItem=
"removeItem"
></InfoCard>
</div>
</
template
>
<
script
>
import
InfoCard
from
'
@common/info-card
'
import
{
overrideLocalStorage
}
from
'
./js/storage
'
export
default
{
components
:
{
InfoCard
},
data
()
{
return
{
storageMap
:
{}
}
},
created
()
{
overrideLocalStorage
(()
=>
{
this
.
updateList
()
});
this
.
updateList
()
},
methods
:
{
updateList
()
{
let
storageMap
=
{...
window
.
localStorage
}
// 有一些属性不需要展示
for
(
const
key
in
storageMap
)
{
if
(
Object
.
hasOwnProperty
.
call
(
storageMap
,
key
))
{
if
(
~
key
.
indexOf
(
'
dokit
'
)
||
typeof
storageMap
[
key
]
!==
'
string
'
)
delete
storageMap
[
key
]
}
}
this
.
storageMap
=
storageMap
},
removeItem
(
key
)
{
window
.
localStorage
.
removeItem
(
key
)
},
clear
()
{
window
.
localStorage
.
clear
()
}
},
}
</
script
>
<
style
lang=
""
>
</
style
>
\ No newline at end of file
Web/packages/web/src/plugins/storage/main.vue
0 → 100644
浏览文件 @
7737a802
<
template
>
<div
class=
"storage-plugin"
>
<localStorage></localStorage>
<sessionStorage></sessionStorage>
<cookie></cookie>
</div>
</
template
>
<
script
>
import
localStorage
from
'
./local-storage
'
;
import
sessionStorage
from
'
./session-storage
'
;
import
cookie
from
'
./cookie
'
;
export
default
{
components
:
{
localStorage
,
sessionStorage
,
cookie
}
}
</
script
>
<
style
>
.storage-plugin
{
padding
:
5px
;
}
</
style
>
\ No newline at end of file
Web/packages/web/src/plugins/storage/session-storage.vue
0 → 100644
浏览文件 @
7737a802
<
template
>
<div
style=
"margin-top:20px;"
>
<InfoCard
:infoMap=
"storageMap"
title=
"sessionStorage"
@
refresh=
"updateList"
@
clear=
"clear"
@
removeItem=
"removeItem"
></InfoCard>
</div>
</
template
>
<
script
>
import
InfoCard
from
'
@common/info-card
'
import
{
overrideSessionStorage
}
from
'
./js/storage
'
export
default
{
components
:
{
InfoCard
},
data
()
{
return
{
storageMap
:
{}
}
},
created
()
{
overrideSessionStorage
(()
=>
{
this
.
updateList
()
});
this
.
updateList
()
},
methods
:
{
updateList
()
{
let
storageMap
=
{...
window
.
sessionStorage
}
// 有一些属性不需要展示
for
(
const
key
in
storageMap
)
{
if
(
Object
.
hasOwnProperty
.
call
(
storageMap
,
key
))
{
if
(
~
key
.
indexOf
(
'
dokit
'
)
||
typeof
storageMap
[
key
]
!==
'
string
'
)
delete
storageMap
[
key
]
}
}
this
.
storageMap
=
storageMap
},
removeItem
(
key
)
{
window
.
sessionStorage
.
removeItem
(
key
)
},
clear
()
{
window
.
sessionStorage
.
clear
()
}
},
}
</
script
>
<
style
lang=
""
>
</
style
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录