Skip to content

Commit 98421f7

Browse files
Shimada666Shimada666
committed
chore: add demo website
1 parent 3231794 commit 98421f7

12 files changed

Lines changed: 8701 additions & 20 deletions

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.DS_Store
22
node_modules
33
/dist
4+
dist
45

56
.stylelintcache
67

@@ -25,4 +26,4 @@ yarn-error.log*
2526

2627
/pages
2728
example/**/node_modules
28-
dev/**/node_modules
29+
dev/**/node_modules

‎demo/App.vue‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<script lang="ts" setup>
2+
import { version } from 'vue-demi'
3+
import { reactive, ref, watch } from 'vue'
4+
import { newShortText } from './text/new-short-text'
5+
import { oldShortText } from './text/old-short-text'
6+
7+
const formState = reactive({
8+
language: 'json',
9+
diffStyle: 'word',
10+
outputFormat: 'side-by-side',
11+
context: 10,
12+
trim: false,
13+
noDiffLineFeed: false,
14+
})
15+
16+
const oldString = ref(oldShortText.value)
17+
const newString = ref(newShortText.value)
18+
if (localStorage.getItem('oldString'))
19+
oldString.value = localStorage.getItem('oldString')
20+
21+
if (localStorage.getItem('newString'))
22+
newString.value = localStorage.getItem('newString')
23+
24+
const resetText = () => {
25+
localStorage.removeItem('oldString')
26+
localStorage.removeItem('newString')
27+
oldString.value = oldShortText.value
28+
newString.value = newShortText.value
29+
}
30+
const clearText = () => {
31+
localStorage.removeItem('oldString')
32+
localStorage.removeItem('newString')
33+
oldString.value = ''
34+
newString.value = ''
35+
}
36+
watch(oldString, () => localStorage.setItem('oldString', oldString.value))
37+
watch(newString, () => localStorage.setItem('newString', newString.value))
38+
</script>
39+
40+
<template>
41+
<p align="center">
42+
Vue version: {{ version }}. CodeDiff version: 1.1.0.
43+
</p>
44+
<div style="display: flex; justify-content: space-evenly;">
45+
<textarea v-model="oldString" style="width: 48vw;" :rows="20" />
46+
<textarea v-model="newString" style="width: 48vw;" :rows="20" />
47+
</div>
48+
<a-form
49+
style="margin: 10px;"
50+
layout="inline"
51+
:model="formState"
52+
>
53+
<!-- <a-form-item label="文件名(filename)" -->
54+
<!-- <a-input v-model:value="formState.filename" placeholder="请输入文件名" /> -->
55+
<!-- </a-form-item> -->
56+
<a-form-item label="语言(langauge)">
57+
<a-select v-model:value="formState.language" style="width: 120px;" disabled>
58+
<a-select-option value="json">
59+
json
60+
</a-select-option>
61+
</a-select>
62+
</a-form-item>
63+
<a-form-item label="差异化范围(context)">
64+
<a-input-number
65+
v-model:value="formState.context"
66+
:min="0"
67+
/>
68+
</a-form-item>
69+
<a-form-item label="显示方式(outputFormat)">
70+
<a-radio-group v-model:value="formState.outputFormat">
71+
<a-radio value="line-by-line">
72+
line-by-line
73+
</a-radio>
74+
<a-radio value="side-by-side">
75+
side-by-side
76+
</a-radio>
77+
</a-radio-group>
78+
</a-form-item>
79+
<a-form-item label="差异级别(diffStyle)">
80+
<a-radio-group v-model:value="formState.diffStyle">
81+
<a-radio value="word">
82+
word
83+
</a-radio>
84+
<a-radio value="char">
85+
char
86+
</a-radio>
87+
</a-radio-group>
88+
</a-form-item>
89+
<a-form-item label="移除字符串前后空白字符(trim)">
90+
<a-switch v-model:checked="formState.trim" />
91+
</a-form-item>
92+
<a-form-item label="不 diff 换行符(noDiffLineFeed)">
93+
<a-switch v-model:checked="formState.noDiffLineFeed" />
94+
</a-form-item>
95+
<a-form-item>
96+
<a-button type="link" @click="resetText">
97+
重置文本(reset text)
98+
</a-button>
99+
</a-form-item>
100+
<a-form-item>
101+
<a-button type="link" @click="clearText">
102+
清空文本(clear text)
103+
</a-button>
104+
</a-form-item>
105+
</a-form>
106+
<CodeDiff
107+
:old-string="oldString"
108+
:new-string="newString"
109+
:language="formState.language"
110+
:diff-style="formState.diffStyle"
111+
:output-format="formState.outputFormat"
112+
:context="formState.context"
113+
:trim="formState.trim"
114+
:no-diff-line-feed="formState.noDiffLineFeed"
115+
/>
116+
</template>
117+
118+
<style lang="scss">
119+
body {
120+
margin: 0;
121+
}
122+
</style>

‎demo/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
<script>
8+
var _hmt = _hmt || [];
9+
(function () {
10+
const hm = document.createElement('script')
11+
hm.src = 'https://hm.baidu.com/hm.js?042fdf4e0f49c76b14216673aaaf85a4'
12+
const s = document.getElementsByTagName('script')[0]
13+
s.parentNode.insertBefore(hm, s)
14+
})()
15+
</script>
16+
</head>
17+
<body>
18+
<a href="https://github.com/Shimada666/v-code-diff" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
19+
<div id="app"></div>
20+
<script type="module" src="./main.ts"></script>
21+
</body>
22+
</html>

‎demo/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { createApp } from 'vue'
2+
import CodeDiff from '../src/index'
3+
import App from './App.vue'
4+
5+
const app = createApp(App)
6+
app.use(CodeDiff)
7+
8+
app.mount('#app')

‎demo/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "demo",
3+
"private": true,
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build --base=/v-code-diff/",
7+
"gh-pages": "npm run build && gh-pages -d ./dist"
8+
},
9+
"dependencies": {
10+
"vue": "^3.2.45",
11+
"ant-design-vue": "^3.2.15",
12+
"gh-pages": "^5.0.0"
13+
},
14+
"devDependencies": {
15+
"vite": "^4.0.4",
16+
"@vitejs/plugin-vue": "^4.0.0",
17+
"unplugin-vue-components": "^0.23.0"
18+
}
19+
}

0 commit comments

Comments
 (0)