Skip to content

Commit 1874be4

Browse files
Shimada666Shimada666
authored
Merge pull request #107 from Shimada666/update-demo
feat: update demo
2 parents 113884b + c4a9e0e commit 1874be4

3 files changed

Lines changed: 135 additions & 116 deletions

File tree

‎README-zh.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ Vue.use(CodeDiff);
121121
| maxHeight | 组件最大高度，例如 300px | string | - | undefined |
122122
| filename | 文件名 | string | - | undefined |
123123
| newFilename | 新文件文件名 | string | - | undefined |
124-
| theme | 用于切换日间模式/夜间模式 | ThemeType | light , dark | 'light' |
124+
| theme | 用于切换日间模式/夜间模式 | ThemeType | light , dark | light |
125125

126126
## 组件事件
127127

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ Not recommended, but the relevant capabilities are retained to facilitate migrat
123123
| maxHeight | Maximum height of component, for example: 300px | string | - | undefined |
124124
| filename | Filename | string | - | undefined |
125125
| newFilename | New filename | string | - | undefined |
126-
| theme | Add dark mode | ThemeType | light , dark | 'light' |
126+
| theme | Add dark mode | ThemeType | light , dark | light |
127127

128128
## Events
129129

‎demo/App.vue‎

Lines changed: 133 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const formState = reactive({
1313
trim: false,
1414
noDiffLineFeed: false,
1515
filename: 'package.json',
16+
newFilename: 'newPackage.json',
1617
hideHeader: false,
1718
hideStat: false,
1819
})
@@ -49,123 +50,141 @@ function printEvent(e) {
4950
</script>
5051

5152
<template>
52-
<p align="center">
53-
Vue version: {{ version }}. CodeDiff version: 1.7.1
54-
</p>
55-
<div style="display: flex; justify-content: space-evenly;">
56-
<textarea v-model="oldString" style="width: 48vw;" :rows="20" />
57-
<textarea v-model="newString" style="width: 48vw;" :rows="20" />
53+
<div style="padding:10px 35px">
54+
<div class="banner">
55+
<h1>v-code-diff</h1>
56+
<p>A code diff display plugin, available for Vue2 / Vue3.</p>
57+
<p align="center">
58+
Vue version: {{ version }}. CodeDiff version: 1.8.0
59+
</p>
60+
<a-button><a href="https://github.com/Shimada666/v-code-diff">View on Github</a></a-button>
61+
</div>
62+
<div style="display: flex; justify-content: space-between;">
63+
<div style="margin-right: 5px;">
64+
<a-input v-model:value="formState.filename" />
65+
<textarea v-model="oldString" style="width: 48vw;" :rows="20" />
66+
</div>
67+
<div>
68+
<a-input v-model:value="formState.newFilename" />
69+
<textarea v-model="newString" style="width: 48vw;" :rows="20" />
70+
</div>
71+
72+
</div>
73+
<div style="margin-top: 10px;">
74+
<a-button style="margin-right: 5px;" @click="resetText">
75+
重置文本(reset text)
76+
</a-button>
77+
<a-button type="default" @click="clearText">
78+
清空文本(clear text)
79+
</a-button>
80+
</div>
81+
<a-card style="margin-top:15px" title="Options">
82+
<a-form layout="inline" :model="formState">
83+
<a-row :gutter="16">
84+
<a-col :md="8" :sm="24">
85+
<a-form-item label="语言(langauge)">
86+
<a-select v-model:value="formState.language" style="width: 12vw;">
87+
<a-select-option
88+
v-for=" item in ['plaintext', 'json', 'yaml', 'javascript', 'java', 'python', 'sql', 'xml', 'bash'] "
89+
:key="item" :value="item">
90+
{{ item }}
91+
</a-select-option>
92+
</a-select>
93+
</a-form-item>
94+
</a-col>
95+
<a-col :md="8" :sm="24">
96+
<a-form-item label="主题模式(theme)">
97+
<a-radio-group v-model:value="formState.theme">
98+
<a-radio value="light">
99+
日间模式(light)
100+
</a-radio>
101+
<a-radio value="dark">
102+
夜间模式(dark)
103+
</a-radio>
104+
</a-radio-group>
105+
</a-form-item>
106+
</a-col>
107+
<a-col :md="8" :sm="24">
108+
<a-form-item label="差异化范围(context)">
109+
<a-input-number v-model:value="formState.context" :min="0" style="width: 12vw;" />
110+
</a-form-item>
111+
</a-col>
112+
<a-col :md="8" :sm="24">
113+
<a-form-item label="显示方式(outputFormat)">
114+
<a-radio-group v-model:value="formState.outputFormat">
115+
<a-radio value="line-by-line">
116+
line-by-line
117+
</a-radio>
118+
<a-radio value="side-by-side">
119+
side-by-side
120+
</a-radio>
121+
</a-radio-group>
122+
</a-form-item>
123+
</a-col>
124+
<a-col :md="8" :sm="24">
125+
<a-form-item label="差异级别(diffStyle)">
126+
<a-radio-group v-model:value="formState.diffStyle">
127+
<a-radio value="word">
128+
word
129+
</a-radio>
130+
<a-radio value="char">
131+
char
132+
</a-radio>
133+
</a-radio-group>
134+
</a-form-item>
135+
</a-col>
136+
<a-col :md="8" :sm="24">
137+
<a-form-item label="移除字符串前后空白字符(trim)">
138+
<a-switch v-model:checked="formState.trim" />
139+
</a-form-item>
140+
</a-col>
141+
<a-col :md="8" :sm="24">
142+
<a-form-item label="不 diff 换行符(noDiffLineFeed)">
143+
<a-switch v-model:checked="formState.noDiffLineFeed" />
144+
</a-form-item>
145+
</a-col>
146+
<a-col :md="8" :sm="24">
147+
<a-form-item label="隐藏首部(hide Header)">
148+
<a-switch v-model:checked="formState.hideHeader" />
149+
</a-form-item>
150+
</a-col>
151+
<a-col :md="8" :sm="24">
152+
<a-form-item label="隐藏统计信息(hide Statistics)">
153+
<a-switch v-model:checked="formState.hideStat" />
154+
</a-form-item>
155+
</a-col>
156+
</a-row>
157+
</a-form>
158+
</a-card>
159+
<div>
160+
<CodeDiff :theme="formState.theme" :old-string="oldString" :new-string="newString" :language="formState.language"
161+
:diff-style="formState.diffStyle" :output-format="formState.outputFormat" :context="formState.context"
162+
:trim="formState.trim" :no-diff-line-feed="formState.noDiffLineFeed" :filename="formState.filename"
163+
:new-filename="formState.newFilename" :hide-header="formState.hideHeader" :hide-stat="formState.hideStat"
164+
@diff="printEvent" />
165+
</div>
58166
</div>
59-
<a-form style="margin: 10px;" layout="inline" :model="formState">
60-
<a-row :gutter="16">
61-
<a-col :md="12" :sm="24">
62-
<a-form-item label="文件名(filename)">
63-
<a-input style="width: 16vw;" v-model:value="formState.filename" placeholder="请输入文件名" />
64-
</a-form-item>
65-
</a-col>
66-
<a-col :md="12" :sm="24">
67-
<a-form-item label="语言(langauge)">
68-
<a-select v-model:value="formState.language" style="width: 12vw;">
69-
<a-select-option
70-
v-for="item in ['plaintext', 'json', 'yaml', 'javascript', 'java', 'python', 'sql', 'xml', 'bash']"
71-
:key="item" :value="item">
72-
{{ item }}
73-
</a-select-option>
74-
</a-select>
75-
</a-form-item>
76-
</a-col>
77-
<a-col :md="12" :sm="24">
78-
<a-form-item label="主题模式(theme)">
79-
<a-radio-group v-model:value="formState.theme">
80-
<a-radio value="light">
81-
日间模式(light)
82-
</a-radio>
83-
<a-radio value="dark">
84-
夜间模式(dark)
85-
</a-radio>
86-
</a-radio-group>
87-
</a-form-item>
88-
</a-col>
89-
<a-col :md="12" :sm="24">
90-
<a-form-item label="差异化范围(context)">
91-
<a-input-number v-model:value="formState.context" :min="0" style="width: 12vw;" />
92-
</a-form-item>
93-
</a-col>
94-
<a-col :md="12" :sm="24">
95-
<a-form-item label="显示方式(outputFormat)">
96-
<a-radio-group v-model:value="formState.outputFormat">
97-
<a-radio value="line-by-line">
98-
line-by-line
99-
</a-radio>
100-
<a-radio value="side-by-side">
101-
side-by-side
102-
</a-radio>
103-
</a-radio-group>
104-
</a-form-item>
105-
</a-col>
106-
<a-col :md="12" :sm="24">
107-
<a-form-item label="差异级别(diffStyle)">
108-
<a-radio-group v-model:value="formState.diffStyle">
109-
<a-radio value="word">
110-
word
111-
</a-radio>
112-
<a-radio value="char">
113-
char
114-
</a-radio>
115-
</a-radio-group>
116-
</a-form-item>
117-
</a-col>
118-
<a-col :md="12" :sm="24">
119-
<a-form-item label="移除字符串前后空白字符(trim)">
120-
<a-switch v-model:checked="formState.trim" />
121-
</a-form-item>
122-
</a-col>
123-
<a-col :md="12" :sm="24">
124-
<a-form-item label="不 diff 换行符(noDiffLineFeed)">
125-
<a-switch v-model:checked="formState.noDiffLineFeed" />
126-
</a-form-item>
127-
</a-col>
128-
<a-col :md="12" :sm="24">
129-
<a-form-item label="隐藏首部(hide Header)">
130-
<a-switch v-model:checked="formState.hideHeader" />
131-
</a-form-item>
132-
</a-col>
133-
<a-col :md="12" :sm="24">
134-
<a-form-item label="隐藏统计信息(hide Statistics)">
135-
<a-switch v-model:checked="formState.hideStat" />
136-
</a-form-item>
137-
</a-col>
138-
<a-col :md="12" :sm="24">
139-
<a-form-item>
140-
<a-button style="margin-right: 10px;" type="default" @click="resetText">
141-
重置文本(reset text)
142-
</a-button>
143-
<a-button type="default" @click="clearText">
144-
清空文本(clear text)
145-
</a-button>
146-
</a-form-item>
147-
</a-col>
148-
</a-row>
149-
</a-form>
150-
<CodeDiff
151-
:theme="formState.theme"
152-
:old-string="oldString"
153-
:new-string="newString"
154-
:language="formState.language"
155-
:diff-style="formState.diffStyle"
156-
:output-format="formState.outputFormat"
157-
:context="formState.context"
158-
:trim="formState.trim"
159-
:no-diff-line-feed="formState.noDiffLineFeed"
160-
:filename="formState.filename"
161-
:hide-header="formState.hideHeader"
162-
:hide-stat="formState.hideStat"
163-
@diff="printEvent"
164-
/>
165167
</template>
166168

167169
<style lang="scss">
168-
body {
169-
margin: 0;
170+
.banner {
171+
text-align: center;
172+
padding: 20px;
173+
border-radius: 8px;
174+
}
175+
176+
.banner h1 {
177+
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
178+
color: transparent;
179+
-webkit-background-clip: text;
180+
font-size: 88px;
181+
line-height: 90px;
182+
font-weight: bold;
183+
margin-bottom: 10px;
184+
}
185+
186+
.banner p {
187+
font-size: 16px;
188+
color: #666;
170189
}
171190
</style>

0 commit comments

Comments
 (0)