Skip to content

Commit acfc6f7

Browse files
09473ZH09473ZH
committed
feat: update demo
1 parent 113884b commit acfc6f7

File tree

1 file changed

+126
-114
lines changed

1 file changed

+126
-114
lines changed

‎demo/App.vue

Lines changed: 126 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -49,123 +49,135 @@ function printEvent(e) {
4949
</script>
5050

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

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

0 commit comments

Comments
 (0)