Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
夜猫逐梦
1024程序员开源挑战赛
提交
c180922f
1
1024程序员开源挑战赛
项目概览
夜猫逐梦
/
1024程序员开源挑战赛
与 Fork 源项目一致
Fork自
GitCode / 1024程序员开源挑战赛(10.23-11.14)
通知
3
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
1
1024程序员开源挑战赛
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
c180922f
编写于
10月 26, 2021
作者:
B
baiy
提交者:
ninecents
10月 23, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
diff 重构
上级
6fd03f8e
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
106 addition
and
65 deletion
+106
-65
package-lock.json
package-lock.json
+1
-6
package.json
package.json
+0
-1
src/views/tool/components/diffEditor.vue
src/views/tool/components/diffEditor.vue
+69
-29
src/views/tool/diffs.vue
src/views/tool/diffs.vue
+36
-29
未找到文件。
package-lock.json
浏览文件 @
c180922f
{
"name"
:
"c-tool"
,
"version"
:
"1.
7.1
0"
,
"version"
:
"1.
8.
0"
,
"lockfileVersion"
:
1
,
"requires"
:
true
,
"dependencies"
:
{
...
...
@@ -4505,11 +4505,6 @@
"integrity"
:
"sha512-qi86tE6hRcFHy8jI1m2VG+LaPUR1LhqDa5G8tVjuUXmOrpuAgqsA1pN0+ldgr3aKUH+QLI9hCY/OcRYisERejw=="
,
"dev"
:
true
},
"diff"
:
{
"version"
:
"4.0.2"
,
"resolved"
:
"https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
,
"integrity"
:
"sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
},
"diffie-hellman"
:
{
"version"
:
"5.0.3"
,
"resolved"
:
"https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz"
,
...
...
package.json
浏览文件 @
c180922f
...
...
@@ -19,7 +19,6 @@
"
cron-parser
"
:
"
^2.16.3
"
,
"
cronstrue
"
:
"
^1.122.0
"
,
"
crypto-js
"
:
"
^3.3.0
"
,
"
diff
"
:
"
^4.0.2
"
,
"
file
"
:
"
^0.2.2
"
,
"
http-build-query
"
:
"
^0.7.0
"
,
"
ipinyinjs
"
:
"
^1.0.0
"
,
...
...
src/views/tool/components/diffEditor.vue
浏览文件 @
c180922f
<
template
>
<div
ref=
"container"
class=
"diff-editor"
:style=
"`height:$
{
h
eight};width:${width}`">
</div>
<div
ref=
"container"
class=
"diff-editor"
:style=
"`height:$
{
containerH
eight};width:${width}`">
</div>
</
template
>
<
script
>
import
{
createMerge
}
from
"
../library/editor
"
;
import
*
as
monaco
from
'
monaco-editor/esm/vs/editor/editor.api
'
;
export
default
{
name
:
'
diffEditor
'
,
...
...
@@ -14,13 +14,21 @@ export default {
type
:
String
,
default
:
""
},
collapse
:
{
autoHeight
:
{
type
:
Number
,
default
:
0
},
theme
:
{
type
:
String
,
default
:
'
vs
'
},
roundedSelection
:
{
type
:
Boolean
,
default
:
fals
e
default
:
tru
e
},
height
:
{
type
:
String
,
default
:
"
100%
"
default
:
"
350px
"
},
width
:
{
type
:
String
,
...
...
@@ -29,51 +37,83 @@ export default {
},
watch
:
{
value
()
{
this
.
reset
()
value
(
newValue
)
{
if
(
this
.
editor
!==
null
&&
(
this
.
original
.
getValue
()
!==
newValue
[
'
original
'
]
||
this
.
modified
.
getValue
()
!==
newValue
[
'
modified
'
]
))
{
this
.
original
.
setValue
(
newValue
[
'
original
'
])
this
.
modified
.
setValue
(
newValue
[
'
modified
'
])
}
},
language
(
newValue
)
{
if
(
this
.
editor
!==
null
)
{
this
.
editor
.
customSetEditorLanguage
(
newValue
);
monaco
.
editor
.
setModelLanguage
(
this
.
editor
.
getOriginalEditor
().
getModel
(),
newValue
)
monaco
.
editor
.
setModelLanguage
(
this
.
editor
.
getModifiedEditor
().
getModel
(),
newValue
)
}
},
theme
(
newValue
)
{
if
(
this
.
editor
!==
null
)
{
monaco
.
editor
.
setTheme
(
newValue
)
}
}
},
collapse
()
{
this
.
reset
()
created
()
{
if
(
this
.
autoHeight
>
0
)
{
this
.
containerHeight
=
(
window
.
innerHeight
-
this
.
autoHeight
)
+
"
px
"
}
else
{
this
.
containerHeight
=
this
.
height
}
},
mounted
()
{
this
.
reset
()
this
.
initEditor
()
},
data
()
{
return
{
editor
:
null
,
original
:
null
,
modified
:
null
,
containerHeight
:
""
}
},
methods
:
{
reset
()
{
this
.
$refs
.
container
.
innerHTML
=
""
;
this
.
initEditor
();
},
initEditor
()
{
this
.
editor
=
createMerge
(
this
.
value
,
this
.
$refs
.
container
,
this
.
language
,
{
collapseIdentical
:
this
.
collapse
?
2
:
false
})
this
.
editor
.
customChange
((
original
,
modified
)
=>
{
if
(
original
!==
this
.
value
.
original
||
modified
!==
this
.
value
.
modified
)
{
this
.
value
.
original
=
original
this
.
value
.
modified
=
modified
this
.
$refs
.
container
.
innerHTML
=
''
this
.
editor
=
monaco
.
editor
.
createDiffEditor
(
this
.
$refs
.
container
,
{
theme
:
this
.
theme
,
roundedSelection
:
this
.
roundedSelection
,
automaticLayout
:
true
,
renderSideBySide
:
true
})
this
.
original
=
monaco
.
editor
.
createModel
(
this
.
value
[
'
original
'
],
this
.
language
)
this
.
modified
=
monaco
.
editor
.
createModel
(
this
.
value
[
'
modified
'
],
this
.
language
)
this
.
editor
.
setModel
({
original
:
this
.
original
,
modified
:
this
.
modified
})
this
.
editor
.
getOriginalEditor
().
updateOptions
({
readOnly
:
false
})
this
.
original
.
onDidChangeContent
(()
=>
{
if
(
this
.
value
.
original
!==
this
.
original
.
getValue
())
{
this
.
value
.
original
=
this
.
original
.
getValue
()
this
.
$emit
(
'
input
'
,
this
.
value
)
}
})
this
.
modified
.
onDidChangeContent
(()
=>
{
if
(
this
.
value
.
modified
!==
this
.
modified
.
getValue
())
{
this
.
value
.
modified
=
this
.
modified
.
getValue
()
this
.
$emit
(
'
input
'
,
this
.
value
)
}
})
},
// 行内模式
inline
(
value
)
{
if
(
this
.
editor
)
{
value
=
!!
value
;
this
.
editor
.
updateOptions
({
renderSideBySide
:
!!
value
})
this
.
editor
.
getOriginalEditor
().
updateOptions
({
readOnly
:
!
value
})
this
.
editor
.
getModifiedEditor
().
updateOptions
({
readOnly
:
!
value
})
}
}
}
};
</
script
>
<
style
>
.diff-editor
.CodeMirror-merge
{
border
:
none
;
}
.diff-editor
.CodeMirror-merge
,
.diff-editor
.CodeMirror-merge-pane
,
.diff-editor
.CodeMirror-merge
.CodeMirror
{
height
:
100%
;
}
</
style
>
src/views/tool/diffs.vue
浏览文件 @
c180922f
<
template
>
<div>
<heightResize
:append=
"['.page-option-block']"
>
<div
style=
"border: 1px solid #dcdee2; border-radius: 4px;height: 100%;"
>
<diff-editor
ref=
"editor"
:collapse=
"current.collapse"
v-model=
"current.diff"
:language=
"current.language"
/>
<div
style=
"border: 1px solid #dcdee2; border-radius: 4px"
>
<diffEditor
ref=
"editor"
v-model=
"current.diff"
:language=
"current.language"
:auto-height=
"220"
/>
</div>
</heightResize>
<option-block
class=
"page-option-block"
>
<option-block>
<FormItem>
<ButtonGroup>
<Button
:type=
"current.language !== item ? 'primary' : 'warning'"
@
click=
"setLanguage(item)"
:type=
"current.language !== item
.id
? 'primary' : 'warning'"
@
click=
"setLanguage(item
.id
)"
v-for=
"item in buttonLang"
:key=
"item"
>
{{
item
}}
:key=
"item
.id
"
>
{{
item
.
name
}}
</Button>
</ButtonGroup>
</FormItem>
<FormItem>
<Select
:placeholder=
"$t('diffs_more')
"
@
on-change=
"(value)=>
{setLanguage(value)}">
<Option
v-for=
"item in allLang"
:value=
"item
"
:key=
"item"
>
{{
item
}}
</Option>
<Select
placeholder=
"更多语言
"
@
on-change=
"(value)=>
{setLanguage(value)}">
<Option
v-for=
"item in allLang"
:value=
"item
.id"
:key=
"item.id"
>
{{
item
.
name
}}
</Option>
</Select>
</FormItem>
<FormItem>
<Checkbox
v-model=
"current.collapse"
>
{{
$t
(
'
diffs_collapse
'
)
}}
</Checkbox>
<Checkbox
@
on-change=
"(value)=>inline(value)"
>
行内对比
</Checkbox>
</FormItem>
</option-block>
</div>
</
template
>
<
script
>
import
diffEditor
from
"
./components/diffEditor
"
;
import
{
allLang
}
from
"
./library/editor
"
;
import
_
from
"
lodash
"
;
import
heightResize
from
"
./components/heightResize
"
;
import
*
as
monaco
from
'
monaco-editor/esm/vs/editor/editor.api
'
;
let
allLang
=
{}
for
(
let
lang
of
monaco
.
languages
.
getLanguages
())
{
allLang
[
lang
.
id
]
=
{
id
:
lang
.
id
,
name
:
lang
.
id
===
"
plaintext
"
?
"
纯文本
"
:
lang
.
aliases
[
0
]
}
}
const
COMMON_LANG
=
[
"
text
"
,
"
plaintext
"
,
"
javascript
"
,
"
html
"
,
"
js
"
,
"
css
"
,
"
json
"
,
"
python
"
,
...
...
@@ -48,44 +52,47 @@ const COMMON_LANG = [
export
default
{
components
:
{
diffEditor
,
heightResize
},
computed
:
{
allLang
()
{
return
allLang
return
Object
.
values
(
allLang
)
},
buttonLang
()
{
let
data
=
_
.
cloneDeep
(
COMMON_LANG
);
if
(
this
.
current
.
language
&&
!
data
.
includes
(
this
.
current
.
language
))
{
data
.
push
(
this
.
current
.
language
)
let
data
=
COMMON_LANG
.
map
((
item
)
=>
{
return
allLang
[
item
]
});
if
(
this
.
current
.
language
&&
!
COMMON_LANG
.
includes
(
this
.
current
.
language
))
{
data
.
push
(
allLang
[
this
.
current
.
language
])
}
return
data
;
}
},
created
()
{
this
.
$initToolData
(
)
this
.
current
=
Object
.
assign
(
this
.
current
,
this
.
$getToolData
()
)
},
methods
:
{
setLanguage
(
lang
)
{
this
.
current
.
language
=
lang
;
},
inline
(
value
){
this
.
$refs
.
editor
.
inline
(
!
value
)
}
},
watch
:
{
current
:
{
handler
(
newVal
)
{
if
(
newVal
.
diff
.
original
&&
newVal
.
diff
.
modified
)
{
current
:{
handler
(
newVal
){
if
(
newVal
.
diff
.
original
&&
newVal
.
diff
.
modified
){
this
.
$saveToolData
(
this
.
current
);
}
},
deep
:
true
deep
:
true
}
},
data
()
{
return
{
current
:
{
diff
:
{
original
:
""
,
modified
:
""
},
language
:
"
text
"
,
collapse
:
false
language
:
""
}
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录