Skip to content

Commit f2ff58d

Browse files
LonggerererLonggererer
committed
feat: 添加删除模板功能
1 parent e51121f commit f2ff58d

File tree

11 files changed

+164
-54
lines changed

11 files changed

+164
-54
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title>前端在线编辑器 - JS-Encoder</title>
99

1010
<!-- start style -->
11-
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3456619_pqsb251b4b.css?spm=a313x.manage_type_myprojects.i1.9.51003a818wBFtw&file=font_3456619_pqsb251b4b.css">
11+
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3456619_mjzgx4y7hs.css?spm=a313x.manage_type_myprojects.i1.9.51003a81CW7Ivl&file=font_3456619_mjzgx4y7hs.css">
1212
<link rel="icon" href="/favicon.ico" />
1313
<!-- font -->
1414
<link rel="preconnect" href="https://fonts.googleapis.com">

‎src/components/dropdown/dropdown.vue‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,18 @@
88
<teleport to="body" :disabled="!appendToBody">
99
<div
1010
v-show="modelValue"
11-
class="shadow p-y-xs absolute radius-m"
12-
:class="`${namespace}-options-wrapper ${namespace}-align-${align}`"
13-
:style="{...optionsStyle}">
14-
<div :class="`${namespace}-options relative`" @click="handleClickOption">
15-
<slot name="options"></slot>
11+
class="absolute pos-origin"
12+
:class="[
13+
appendToBody ? '' : 'absolute pos-origin no-append-to-body',
14+
]"
15+
:style="{ zIndex: level }">
16+
<div
17+
class="shadow p-y-xs absolute radius-m pos-origin"
18+
:class="`${namespace}-options-wrapper ${namespace}-align-${align}`"
19+
:style="{ ...offsetStyle, ...optionsStyle }">
20+
<div :class="`${namespace}-options relative`" @click="handleClickOption">
21+
<slot name="options"></slot>
22+
</div>
1623
</div>
1724
</div>
1825
</teleport>
@@ -23,27 +30,31 @@
2330
import { onMounted, shallowRef, watch } from "vue"
2431
import useClickOutside from "@hooks/use-click-outside"
2532
import { Trigger, Position, Align } from "@type/interface"
33+
import { getOffsetStyle, getPosStyle } from "@components/utils/common"
2634
2735
interface IProps {
2836
/** 是否显示下拉菜单 */
2937
modelValue: boolean
3038
/** 触发下拉的行为 */
3139
trigger?: string
3240
/** 菜单显示的位置 */
33-
position?: Position
41+
position?: Position | string
3442
/** 菜单沿着哪一边对齐 */
35-
align?: Align
43+
align?: Align | string
3644
/** 是否显示三角 */
3745
showTriangle?: boolean
3846
/** 是否将选择项列表插入到body中 */
3947
appendToBody?: boolean
48+
/** 层级，对应z-index */
49+
level?: string | number
4050
}
4151
4252
const props = withDefaults(defineProps<IProps>(), {
4353
position: Position.BOTTOM,
4454
align: Align.LEFT,
4555
trigger: Trigger.CLICK,
4656
modelValue: false,
57+
level: "auto",
4758
})
4859
const emits = defineEmits(["update:modelValue"])
4960
@@ -68,21 +79,22 @@ watch(isClickOutSide, () => {
6879
6980
/** 定位样式 */
7081
const optionsStyle = shallowRef<Record<string, string>>({})
82+
/** 偏移样式 */
83+
const offsetStyle = getOffsetStyle(0, props.position as Position)
7184
const setOptionStyle = () => {
7285
if (!props.appendToBody || !dropdownOptsRef.value) { return }
73-
const { height = 0, width = 0, top = 0, left = 0, right = 0 } = dropdownOptsRef.value.getBoundingClientRect()
74-
const { align } = props
86+
const {
87+
height = 0, width = 0, bottom = 0, top = 0, left = 0, right = 0,
88+
} = dropdownOptsRef.value.getBoundingClientRect()
7589
optionsStyle.value = {
76-
width: "auto",
77-
transform: "none",
78-
top: `${top + height}px`,
79-
right: align === Align.RIGHT ? `calc(100% - ${right}px)` : "auto",
80-
bottom: "auto",
81-
left: align === Align.LEFT
90+
...getPosStyle({ left, top, bottom, right, width, height, position: props.position as Position }),
91+
right: props.align === Align.RIGHT ? `calc(100% - ${right}px)` : "auto",
92+
left: props.align === Align.LEFT
8293
? `${left}px`
83-
: align === Align.MIDDLE
94+
: props.align === Align.MIDDLE
8495
? `${left - width / 2}px`
8596
: "auto",
97+
transform: "none",
8698
}
8799
}
88100
onMounted(() => {

‎src/components/icon-btn/icon-btn.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ interface IProps {
2323
/** icon类名 */
2424
iconClass?: string
2525
/** 三种尺寸：sm|md|lg */
26-
size?: IconBtnSize
26+
size?: "sm" | "md" | "lg"
2727
title?: string
2828
highlight?: boolean
2929
highlightStyle?: AnyObject

‎src/styles/common.scss‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -101,14 +101,14 @@
101101
.bg-white { background: #FFF; }
102102

103103
/** color */
104-
.emphasis0-text { color: var(--color-emphasis0) }
105-
.emphasis1-text { color: var(--color-emphasis1) }
106-
.emphasis2-text { color: var(--color-emphasis2) }
107-
.emphasis3-text { color: var(--color-emphasis3) }
108-
.emphasis4-text { color: var(--color-emphasis4) }
109-
.green0-text { color: var(--color-green0) }
110-
.green1-text { color: var(--color-green1) }
111-
.green2-text { color: var(--color-green2) }
104+
.emphasis0-text { color: var(--color-emphasis0); }
105+
.emphasis1-text { color: var(--color-emphasis1); }
106+
.emphasis2-text { color: var(--color-emphasis2); }
107+
.emphasis3-text { color: var(--color-emphasis3); }
108+
.emphasis4-text { color: var(--color-emphasis4); }
109+
.green0-text { color: var(--color-green0); }
110+
.green1-text { color: var(--color-green1); }
111+
.green2-text { color: var(--color-green2); }
112112
.no-active-text { color: var(--color-no-active-color); }
113113
.active-text { color: var(--color-active-color); }
114114
.primary0-text { color: var(--color-primary0); }
@@ -117,7 +117,9 @@
117117
.describe-text { color: var(--color-describe); }
118118
.golden-text { color: var(--color-golden); }
119119
.form-item-color { color: var(--color-form-item); }
120-
.error-text { color: var(--color-red1); }
120+
.red1-text { color: var(--color-red1); }
121+
.red2-text { color: var(--color-red2); }
122+
.amber2-text { color: var(--color-amber2); }
121123

122124
/** 省略 */
123125
%line-clamp {

‎src/utils/services/indexed-db-service.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,11 @@ export class DBService {
178178
}
179179

180180
/** 删除数据 */
181-
public delete(storeName: DBStoreName, primaryKey: IDBValidKey | IDBKeyRange): Promise<any> {
182-
return this.setSingleReqCallback(
181+
public delete(
182+
storeName: DBStoreName,
183+
primaryKey: IDBValidKey | IDBKeyRange,
184+
) {
185+
return this.setSingleReqCallback<void>(
183186
() => this.beginTransaction(storeName).delete(primaryKey),
184187
ErrorCode.DB_DELETE_FAILED,
185188
storeName, primaryKey,

‎src/views/components/modals/template-modal/components/template-card/template-card.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,26 @@ export interface IProps {
1818
active: boolean
1919
}
2020

21+
enum EmitType {
22+
CHOOSE = "choose",
23+
EDIT = "edit",
24+
DELETE = "delete",
25+
}
26+
2127
export interface IEmits {
22-
(event: "choose" | "edit", value: ITemplateInfo): void
28+
(event: "choose" | "edit" | "delete", value: ITemplateInfo): void
2329
}
2430

31+
export enum TemplateOptionType {
32+
EDIT,
33+
DELETE,
34+
}
35+
36+
export const templateOptions = [
37+
{ type: TemplateOptionType.EDIT, event: EmitType.EDIT, text: "编辑" },
38+
{ type: TemplateOptionType.DELETE, event: EmitType.DELETE, text: "删除" },
39+
]
40+
2541
/** 根据模板的预处理获取模板的主要语言 */
2642
export const getTemplateIcon = (template: ITemplate): string => {
2743
const { lang, type, editorConfig: { prepMap = {} } } = template

‎src/views/components/modals/template-modal/components/template-card/template-card.vue‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,50 @@
1212
class="font-xxs template-type"
1313
:class="template.isComponent ? 'golden-text' : 'describe-text'"
1414
>{{template.isComponent ? "component" : "default"}}</div>
15-
<i
16-
v-show="template.type === TemplateType.CUSTOM && active"
17-
class="icon iconfont icon-edit-template absolute pos-bottom pos-right mr-s mb-s"
18-
title="编辑模板"
19-
@click.stop="emits('edit', template)"
20-
></i>
15+
</div>
16+
<div
17+
v-if="template.type === TemplateType.CUSTOM"
18+
class="absolute pos-right pos-bottom mr-s mb-s"
19+
title="模板选项">
20+
<dropdown
21+
v-model="showMenu"
22+
position="top"
23+
align="right"
24+
append-to-body
25+
show-triangle
26+
:level="1002">
27+
<icon-btn
28+
size="md"
29+
icon-class="icon-more"
30+
title="模板选项"
31+
hoverBg="none"
32+
customClass="p-y-m"
33+
></icon-btn>
34+
<template #options>
35+
<dropdown-item
36+
v-for="item in templateOptions"
37+
:key="item.type"
38+
@click="emits(item.event, template)">
39+
<div class="p-x-m">{{ item.text }}</div>
40+
</dropdown-item>
41+
</template>
42+
</dropdown>
2143
</div>
2244
</div>
2345
</template>
2446

2547
<script setup lang="ts">
2648
import { TemplateType } from "@type/template"
27-
import { IEmits, IProps, getTemplateIcon } from "./template-card"
49+
import { IEmits, IProps, getTemplateIcon, templateOptions } from "./template-card"
50+
import Dropdown from "@components/dropdown/dropdown.vue"
51+
import DropdownItem from "@components/dropdown/dropdown-item.vue"
52+
import IconBtn from "@components/icon-btn/icon-btn.vue"
53+
import { ref } from "vue"
2854
2955
const props = withDefaults(defineProps<IProps>(), {})
3056
const emits = defineEmits<IEmits>()
3157
58+
const showMenu = ref<boolean>(false)
3259
const templateIcon = getTemplateIcon(props.template)
3360
</script>
3461

‎src/views/components/modals/template-modal/hooks/use-template.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,19 @@ const useTemplate = () => {
7979
})
8080
}
8181

82+
/** 删除模板 */
83+
const deleteTemplate = async (template: ITemplateInfo) => {
84+
const { id } = template
85+
return dbService.delete(DBStoreName.TEMPLATE, id!)
86+
}
87+
8288
return {
8389
getTemplateBaseInfo,
8490
getCustomTemplateList,
8591
createTemplate,
8692
updateTemplate,
8793
applyTemplate,
94+
deleteTemplate,
8895
}
8996
}
9097

0 commit comments

Comments
 (0)