Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
夜猫逐梦
1024程序员开源挑战赛
提交
f5639ffe
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看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f5639ffe
编写于
1月 07, 2022
作者:
B
baiy
提交者:
ninecents
10月 23, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
优化diff工具
上级
d9e3c318
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
94 addition
and
114 deletion
+94
-114
package.json
package.json
+1
-1
src/i18n/locales/en/diffs.i18n.json5
src/i18n/locales/en/diffs.i18n.json5
+2
-1
src/i18n/locales/zh_CN/diffs.i18n.json5
src/i18n/locales/zh_CN/diffs.i18n.json5
+2
-1
src/views/tool/code.vue
src/views/tool/code.vue
+13
-0
src/views/tool/components/diffEditor.vue
src/views/tool/components/diffEditor.vue
+32
-69
src/views/tool/diffs.vue
src/views/tool/diffs.vue
+42
-36
src/views/tool/library/formatter/index.js
src/views/tool/library/formatter/index.js
+2
-6
未找到文件。
package.json
浏览文件 @
f5639ffe
{
"name"
:
"c-tool"
,
"version"
:
"1.10.
0
"
,
"version"
:
"1.10.
1
"
,
"private"
:
true
,
"scripts"
:
{
"serve"
:
"vue-cli-service serve --port 8081"
,
...
...
src/i18n/locales/en/diffs.i18n.json5
浏览文件 @
f5639ffe
{
"more": "More Languages",
"collapse":"Collapse Identical"
"collapse":"Collapse Identical",
"beautify":"Beautify"
}
src/i18n/locales/zh_CN/diffs.i18n.json5
浏览文件 @
f5639ffe
{
"more": "更多语言",
"collapse":"折叠相同"
"collapse":"折叠相同",
"beautify":"格式化"
}
src/views/tool/code.vue
浏览文件 @
f5639ffe
...
...
@@ -52,6 +52,13 @@ export default {
return
data
}
},
watch
:{
"
current.isCompress
"
(){
if
(
this
.
current
.
lang
){
this
.
handle
(
this
.
current
.
lang
)
}
}
},
created
()
{
this
.
$initToolData
(
'
content
'
)
},
...
...
@@ -77,6 +84,12 @@ export default {
}
}
},
isCompressChange
(
value
){
if
(
this
.
current
.
lang
){
console
.
log
(
value
)
this
.
handle
(
this
.
current
.
lang
)
}
}
},
data
()
{
return
{
...
...
src/views/tool/components/diffEditor.vue
浏览文件 @
f5639ffe
<
template
>
<div
ref=
"container"
class=
"diff-editor"
:style=
"`height:$
{
containerH
eight};width:${width}`">
</div>
<div
ref=
"container"
class=
"diff-editor"
:style=
"`height:$
{
h
eight};width:${width}`">
</div>
</
template
>
<
script
>
import
*
as
monaco
from
'
monaco-editor/esm/vs/editor/editor.api
'
;
import
{
createMerge
}
from
"
../library/editor
"
;
export
default
{
name
:
'
diffEditor
'
,
...
...
@@ -14,21 +14,13 @@ export default {
type
:
String
,
default
:
""
},
autoHeight
:
{
type
:
Number
,
default
:
0
},
theme
:
{
type
:
String
,
default
:
'
vs
'
},
roundedSelection
:
{
collapse
:
{
type
:
Boolean
,
default
:
tru
e
default
:
fals
e
},
height
:
{
type
:
String
,
default
:
"
350px
"
default
:
"
100%
"
},
width
:
{
type
:
String
,
...
...
@@ -37,83 +29,54 @@ export default {
},
watch
:
{
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
'
])
}
value
:{
handler
(){
this
.
reset
()
},
deep
:
true
},
language
(
newValue
)
{
if
(
this
.
editor
!==
null
)
{
monaco
.
editor
.
setModelLanguage
(
this
.
editor
.
getOriginalEditor
().
getModel
(),
newValue
)
monaco
.
editor
.
setModelLanguage
(
this
.
editor
.
getModifiedEditor
().
getModel
(),
newValue
)
this
.
editor
.
customSetEditorLanguage
(
newValue
);
}
},
theme
(
newValue
)
{
if
(
this
.
editor
!==
null
)
{
monaco
.
editor
.
setTheme
(
newValue
)
}
}
},
created
()
{
if
(
this
.
autoHeight
>
0
)
{
this
.
containerHeight
=
(
window
.
innerHeight
-
this
.
autoHeight
)
+
"
px
"
}
else
{
this
.
containerHeight
=
this
.
height
collapse
()
{
this
.
reset
()
}
},
mounted
()
{
this
.
initEditor
()
this
.
reset
()
},
data
()
{
return
{
editor
:
null
,
original
:
null
,
modified
:
null
,
containerHeight
:
""
}
},
methods
:
{
reset
()
{
this
.
$refs
.
container
.
innerHTML
=
""
;
this
.
initEditor
();
},
initEditor
()
{
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
.
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
.
$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
浏览文件 @
f5639ffe
<
template
>
<div>
<div
style=
"border: 1px solid #dcdee2; border-radius: 4px"
>
<diffEditor
ref=
"editor"
v-model=
"current.diff"
:language=
"current.language"
:auto-height=
"220"
/>
</div>
<option-block>
<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>
</heightResize>
<option-block
class=
"page-option-block"
>
<FormItem>
<ButtonGroup>
<Button
:type=
"current.language !== item
.id
? 'primary' : 'warning'"
@
click=
"setLanguage(item
.id
)"
:type=
"current.language !== item ? 'primary' : 'warning'"
@
click=
"setLanguage(item)"
v-for=
"item in buttonLang"
:key=
"item
.id
"
>
{{
item
.
name
}}
:key=
"item"
>
{{
item
}}
</Button>
</ButtonGroup>
</FormItem>
<FormItem>
<Select
placeholder=
"更多语言
"
@
on-change=
"(value)=>
{setLanguage(value)}">
<Option
v-for=
"item in allLang"
:value=
"item
.id"
:key=
"item.id"
>
{{
item
.
name
}}
</Option>
<Select
:placeholder=
"$t('diffs_more')
"
@
on-change=
"(value)=>
{setLanguage(value)}">
<Option
v-for=
"item in allLang"
:value=
"item
"
:key=
"item"
>
{{
item
}}
</Option>
</Select>
</FormItem>
<FormItem>
<Checkbox
@
on-change=
"(value)=>inline(value)"
>
行内对比
</Checkbox>
<Button
type=
"primary"
size=
"small"
@
click=
"format"
>
{{
$t
(
'
diffs_beautify
'
)
}}
</Button>
</FormItem>
<FormItem>
<Checkbox
v-model=
"current.collapse"
>
{{
$t
(
'
diffs_collapse
'
)
}}
</Checkbox>
</FormItem>
</option-block>
</div>
</
template
>
<
script
>
import
diffEditor
from
"
./components/diffEditor
"
;
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
]
}
}
import
{
allLang
}
from
"
./library/editor
"
;
import
_
from
"
lodash
"
;
import
heightResize
from
"
./components/heightResize
"
;
import
{
format
}
from
"
./library/formatter
"
;
const
COMMON_LANG
=
[
"
plaintext
"
,
"
javascript
"
,
"
text
"
,
"
html
"
,
"
js
"
,
"
css
"
,
"
json
"
,
"
python
"
,
...
...
@@ -52,47 +53,52 @@ const COMMON_LANG = [
export
default
{
components
:
{
diffEditor
,
heightResize
},
computed
:
{
allLang
()
{
return
Object
.
values
(
allLang
)
return
allLang
},
buttonLang
()
{
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
])
let
data
=
_
.
cloneDeep
(
COMMON_LANG
);
if
(
this
.
current
.
language
&&
!
data
.
includes
(
this
.
current
.
language
))
{
data
.
push
(
this
.
current
.
language
)
}
return
data
;
}
},
created
()
{
this
.
current
=
Object
.
assign
(
this
.
current
,
this
.
$getToolData
()
)
this
.
$initToolData
(
)
},
methods
:
{
setLanguage
(
lang
)
{
this
.
current
.
language
=
lang
;
},
inline
(
value
){
this
.
$refs
.
editor
.
inline
(
!
value
)
format
()
{
try
{
this
.
current
.
diff
.
original
=
format
(
this
.
current
.
diff
.
original
,
this
.
current
.
language
)
this
.
current
.
diff
.
modified
=
format
(
this
.
current
.
diff
.
modified
,
this
.
current
.
language
)
}
catch
(
e
)
{
this
.
$Message
.
error
(
e
.
message
)
}
}
},
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
:
""
language
:
"
text
"
,
collapse
:
false
}
}
}
...
...
src/views/tool/library/formatter/index.js
浏览文件 @
f5639ffe
...
...
@@ -34,14 +34,10 @@ const methods = {
// 代码格式化
export
const
format
=
(
code
,
lang
,
isCompress
=
false
,
options
=
{})
=>
{
if
(
!
(
lang
in
methods
)){
throw
new
Error
(
`
${
lang
}
not support`
);
}
let
method
=
isCompress
?
"
compress
"
:
"
beautify
"
;
if
(
!
(
method
in
methods
[
lang
])){
throw
new
Error
(
`
${
lang
}
not support
${
method
}
`
);
if
(
!
(
lang
in
methods
)
||
!
(
method
in
methods
[
lang
])){
throw
new
Error
(
`
lang:"
${
lang
}
"
not support
${
method
}
`
);
}
return
methods
[
lang
][
method
](
code
,
options
)
};
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录