Skip to content

Commit 2c0b343

Browse files
chunshandchunshand
committed
refactor(全部): 布局重构 更换UI组件库 增加快捷
1 parent 4e4e4a3 commit 2c0b343

14 files changed

Lines changed: 675 additions & 865 deletions

File tree

‎index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<html lang="en">
33
<head>
44
<link rel="icon" href="/favicon.ico" />
5-
<link rel="stylesheet" href="./src/index.css">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
76
<title></title>
87
</head>

‎package.json‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,12 @@
99
},
1010
"dependencies": {
1111
"@vueuse/core": "^7.7.1",
12-
"element-plus": "^2.0.5",
13-
"less": "^4.1.2",
12+
"naive-ui": "^2.26.4",
1413
"vue": "^3.2.25"
1514
},
1615
"devDependencies": {
1716
"@vitejs/plugin-vue": "^2.2.0",
18-
"autoprefixer": "^10.4.2",
19-
"postcss": "^8.4.8",
20-
"tailwindcss": "^3.0.23",
17+
"unplugin-vue-components": "^0.17.21",
2118
"vite": "^2.8.0"
2219
}
2320
}

‎package/gitCommit-0.0.2.upx‎

107 KB
Binary file not shown.

‎postcss.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/App.vue‎

Lines changed: 17 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,24 @@
11

22

33
<template>
4-
<div class="w-full p-2">
5-
<ElRow :gutter="0">
6-
<ElCol
7-
:xs="{
8-
span: 24,
9-
}"
10-
:sm="{
11-
span: 24,
12-
}"
13-
:md="{
14-
span: 24,
15-
}"
16-
:lg="{
17-
span: 12,
18-
offset: 6,
19-
}"
20-
:xl="{
21-
span: 10,
22-
offset: 7,
23-
}"
24-
>
25-
<div class="text-right p-2">
26-
<ElButton type="warning" size="small" @click="handleClear"
27-
>重置内容</ElButton
28-
>
29-
<ElButton
30-
type="success"
31-
size="small"
32-
:disabled="copyDisabled"
33-
@click="copy(content)"
34-
><span v-if="!copied">复制结果</span>
35-
<span v-else>已复制</span></ElButton
36-
>
37-
</div>
38-
<div class="flex justify-center items-center">
39-
<div class="mx-2">
40-
<ElSelect
41-
v-model="type"
42-
placeholder="Select"
43-
size="large"
44-
>
45-
<ElOption
46-
v-for="item in typeOptions"
47-
:key="item.value"
48-
:label="item.label + '(' + item.value + ')'"
49-
:value="item.value"
50-
>
51-
</ElOption>
52-
</ElSelect>
53-
</div>
54-
55-
<div class="mx-2 w-full">
56-
<ElInput v-model="scope" size="large"></ElInput>
57-
</div>
58-
</div>
59-
<div class="p-2">
60-
<ElInput v-model="subject" size="large"></ElInput>
61-
</div>
62-
<div class="p-2">
63-
<ElInput
64-
v-model="body"
65-
type="textarea"
66-
:rows="10"
67-
size="large"
68-
></ElInput>
69-
</div>
70-
71-
<!-- <ElFormItem label="最后">
72-
<ElInput v-model="footer" type="textarea"></ElInput>
73-
</ElFormItem> -->
74-
75-
<div class="py-2">
76-
<div class="text-right"></div>
77-
</div>
78-
</ElCol>
79-
</ElRow>
80-
</div>
4+
<NConfigProvider :theme="theme">
5+
<NMessageProvider>
6+
<Home />
7+
</NMessageProvider>
8+
</NConfigProvider>
9+
<!-- <NButton @click="theme = darkTheme">深色</NButton>
10+
<NButton @click="theme = null">浅色</NButton> -->
8111
</template>
8212
<script setup lang="ts">
83-
import { ref, computed } from "vue";
84-
import {
85-
ElRow,
86-
ElCol,
87-
ElForm,
88-
ElFormItem,
89-
ElSelect,
90-
ElOption,
91-
ElButton,
92-
ElInput,
93-
} from "element-plus";
94-
import { useClipboard } from "@vueuse/core";
95-
const typeOptions = ref([
96-
{
97-
value: "feat",
98-
label: "新功能",
99-
},
100-
{
101-
value: "fix",
102-
label: "修补bug",
103-
},
104-
{
105-
value: "docs",
106-
label: "文档",
107-
},
108-
{
109-
value: "style",
110-
label: "格式",
111-
},
112-
{
113-
value: "refactor",
114-
label: "重构",
115-
},
116-
{
117-
value: "perf",
118-
label: "性能 体验优化",
119-
},
120-
{
121-
value: "test",
122-
label: "增加 更新测试",
123-
},
124-
]);
125-
// 类型
126-
const type = ref("feat");
127-
// 范围
128-
const scope = ref("");
129-
// 简短描述
130-
const subject = ref("");
131-
132-
// body
133-
const body = ref("");
134-
135-
// 最后
136-
const footer = ref("");
137-
138-
const content = computed(() => {
139-
let commit = "";
140-
commit += type.value;
141-
if (scope.value) {
142-
commit += "(" + scope.value + ")";
143-
}
144-
commit += ": " + subject.value;
145-
146-
if (body.value) {
147-
commit += "\r\n\r\n" + body.value + "\r\n\r\n";
148-
}
149-
return commit;
150-
});
151-
const copyDisabled = computed((): boolean => {
152-
return type.value && subject.value ? false : true;
153-
});
154-
const { text, copy, copied, isSupported } = useClipboard({
155-
source: content,
156-
});
157-
const handleClear = () => {
158-
subject.value = "";
159-
scope.value = "";
160-
body.value = "";
161-
type.value = typeOptions.value[0].value;
162-
};
13+
import { ref } from "vue";
14+
// import {
15+
// NConfigProvider,
16+
// NMessageProvider,
17+
// NCard,
18+
// NButton,
19+
// darkTheme,
20+
// } from "naive-ui";
21+
import Home from "./components/home2.vue";
22+
const theme = ref(null);
16323
</script>
164-
<style lang="less" scoped>
165-
</style>
16624

‎src/assets/logo.png‎

-6.69 KB
Binary file not shown.

‎src/components/home.vue‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
2+
3+
<template>
4+
<div class="w-full p-2">
5+
<ElRow :gutter="0">
6+
<ElCol
7+
:xs="{
8+
span: 24,
9+
}"
10+
:sm="{
11+
span: 24,
12+
}"
13+
:md="{
14+
span: 24,
15+
}"
16+
:lg="{
17+
span: 12,
18+
offset: 6,
19+
}"
20+
:xl="{
21+
span: 10,
22+
offset: 7,
23+
}"
24+
>
25+
<div class="text-right p-2">
26+
<ElButton type="warning" size="small" @click="handleClear"
27+
>重置内容</ElButton
28+
>
29+
<ElButton
30+
type="success"
31+
size="small"
32+
:disabled="copyDisabled"
33+
@click="copy(content)"
34+
><span v-if="!copied">复制结果</span>
35+
<span v-else>已复制</span></ElButton
36+
>
37+
{{isDark}}
38+
</div>
39+
<div class="flex justify-center items-center">
40+
<div class="mx-2">
41+
<ElSelect
42+
v-model="type"
43+
placeholder="Select"
44+
size="large"
45+
>
46+
<ElOption
47+
v-for="item in typeOptions"
48+
:key="item.value"
49+
:label="item.label + '(' + item.value + ')'"
50+
:value="item.value"
51+
>
52+
</ElOption>
53+
</ElSelect>
54+
</div>
55+
56+
<div class="mx-2 w-full">
57+
<ElInput
58+
v-model="scope"
59+
size="large"
60+
placeholder="范围"
61+
></ElInput>
62+
</div>
63+
</div>
64+
<div class="p-2">
65+
<ElInput
66+
v-model="subject"
67+
size="large"
68+
placeholder="简短描述"
69+
></ElInput>
70+
</div>
71+
<div class="p-2">
72+
<ElInput
73+
v-model="body"
74+
type="textarea"
75+
:rows="10"
76+
size="large"
77+
placeholder="具体内容"
78+
></ElInput>
79+
</div>
80+
81+
<!-- <ElFormItem label="最后">
82+
<ElInput v-model="footer" type="textarea"></ElInput>
83+
</ElFormItem> -->
84+
85+
<div class="py-2">
86+
<div class="text-right"></div>
87+
</div>
88+
</ElCol>
89+
</ElRow>
90+
</div>
91+
</template>
92+
<script setup lang="ts">
93+
import { ref, computed } from "vue";
94+
import {
95+
ElRow,
96+
ElCol,
97+
ElForm,
98+
ElFormItem,
99+
ElSelect,
100+
ElOption,
101+
ElButton,
102+
ElInput,
103+
} from "element-plus";
104+
import { useClipboard } from "@vueuse/core";
105+
import { usePreferredDark } from "@vueuse/core";
106+
107+
const isDark = usePreferredDark()
108+
const typeOptions = ref([
109+
{
110+
value: "feat",
111+
label: "新功能",
112+
},
113+
{
114+
value: "fix",
115+
label: "修补bug",
116+
},
117+
{
118+
value: "docs",
119+
label: "文档",
120+
},
121+
{
122+
value: "style",
123+
label: "格式",
124+
},
125+
{
126+
value: "refactor",
127+
label: "重构",
128+
},
129+
{
130+
value: "perf",
131+
label: "性能 体验优化",
132+
},
133+
{
134+
value: "test",
135+
label: "增加 更新测试",
136+
},
137+
]);
138+
// 类型
139+
const type = ref("feat");
140+
// 范围
141+
const scope = ref("");
142+
// 简短描述
143+
const subject = ref("");
144+
145+
// body
146+
const body = ref("");
147+
148+
// 最后
149+
const footer = ref("");
150+
151+
const content = computed(() => {
152+
let commit = "";
153+
commit += type.value;
154+
if (scope.value) {
155+
commit += "(" + scope.value + ")";
156+
}
157+
commit += ": " + subject.value;
158+
159+
if (body.value) {
160+
commit += "\r\n\r\n" + body.value + "\r\n\r\n";
161+
}
162+
return commit;
163+
});
164+
const copyDisabled = computed((): boolean => {
165+
return type.value && subject.value ? false : true;
166+
});
167+
const { text, copy, copied, isSupported } = useClipboard({
168+
source: content,
169+
});
170+
const handleClear = () => {
171+
subject.value = "";
172+
scope.value = "";
173+
body.value = "";
174+
type.value = typeOptions.value[0].value;
175+
};
176+
</script>
177+

0 commit comments

Comments
 (0)