-
-
-
-
-
+
diff --git a/src/components/DiyEditor/components/mobile/Carousel/property.vue b/src/components/DiyEditor/components/mobile/Carousel/property.vue
index acaee35f..700e0005 100644
--- a/src/components/DiyEditor/components/mobile/Carousel/property.vue
+++ b/src/components/DiyEditor/components/mobile/Carousel/property.vue
@@ -1,103 +1,120 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 添加图片
- 拖动左上角的小圆点可对其排序
-
-
- 添加图片
-
-
-
- 2个
- 3个
- 4个
- 5个
- 6个
-
-
-
-
- 不显示
- 样式一
- 样式二
- 样式三
-
-
-
-
-
-
-
-
-
+
+ 添加图片
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/ImageBar/config.ts b/src/components/DiyEditor/components/mobile/ImageBar/config.ts
new file mode 100644
index 00000000..68edf728
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/ImageBar/config.ts
@@ -0,0 +1,27 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 图片展示属性 */
+export interface ImageBarProperty {
+ // 图片链接
+ imgUrl: string
+ // 跳转链接
+ url: string
+ // 组件样式
+ style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+ id: 'ImageBar',
+ name: '图片展示',
+ icon: 'ep:picture',
+ property: {
+ imgUrl: '',
+ url: '',
+ style: {
+ bgType: 'color',
+ bgColor: '#fff',
+ marginBottom: 8
+ } as ComponentStyle
+ }
+} as DiyComponent
diff --git a/src/components/DiyEditor/components/mobile/ImageBar/index.vue b/src/components/DiyEditor/components/mobile/ImageBar/index.vue
new file mode 100644
index 00000000..6f70c52d
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/ImageBar/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ 建议宽度750
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
index b250f5f1..f722d525 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
@@ -29,7 +29,7 @@ export const component = {
title: '页面标题',
description: '',
navBarHeight: 35,
- backgroundColor: '#f5f5f5',
+ backgroundColor: '#fff',
backgroundImage: '',
styleType: 'default',
alwaysShow: true,
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/config.ts b/src/components/DiyEditor/components/mobile/SearchBar/config.ts
index 1241748d..ef47b27c 100644
--- a/src/components/DiyEditor/components/mobile/SearchBar/config.ts
+++ b/src/components/DiyEditor/components/mobile/SearchBar/config.ts
@@ -1,4 +1,4 @@
-import { DiyComponent } from '@/components/DiyEditor/util'
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
/** 搜索框属性 */
export interface SearchProperty {
@@ -7,10 +7,10 @@ export interface SearchProperty {
borderRadius: number // 框体样式
placeholder: string // 占位文字
placeholderPosition: PlaceholderPosition // 占位文字位置
- backgroundColor: string // 背景颜色
- borderColor: string // 框体颜色
+ backgroundColor: string // 框体颜色
textColor: string // 字体颜色
hotKeywords: string[] // 热词
+ style: ComponentStyle
}
// 文字位置
@@ -27,9 +27,17 @@ export const component = {
borderRadius: 0,
placeholder: '搜索商品',
placeholderPosition: 'left',
- backgroundColor: 'rgb(249, 249, 249)',
- borderColor: 'rgb(255, 255, 255)',
+ backgroundColor: 'rgb(238, 238, 238)',
textColor: 'rgb(150, 151, 153)',
- hotKeywords: []
+ hotKeywords: [],
+ style: {
+ bgType: 'color',
+ bgColor: '#fff',
+ marginBottom: 8,
+ paddingTop: 8,
+ paddingRight: 8,
+ paddingBottom: 8,
+ paddingLeft: 8
+ } as ComponentStyle
}
} as DiyComponent
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/index.vue b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
index e120405a..618c918b 100644
--- a/src/components/DiyEditor/components/mobile/SearchBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
@@ -2,8 +2,6 @@
-
+
-
+
- ![]()
-
- {{ item.title }}
-
+
+
+
+
+
- {{ currentIndex }} / {{ property.items.length }}
- ![]()
-
- {{ item.title }}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 小圆点
+ 数字
+
+
+
+
+
+ 单位：秒
+
+
+
+ 拖动左上角的小圆点可对其排序
+
+
+
+
-
-
-
-
+
-
-
-
-
+
+
+ 图片
+ 视频
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -12,7 +10,7 @@
class="inner"
:style="{
height: `${property.height}px`,
- background: property.borderColor,
+ background: property.backgroundColor,
borderRadius: `${property.borderRadius}px`
}"
>
@@ -44,13 +42,10 @@ defineProps<{ property: SearchProperty }>()
diff --git a/src/components/DiyEditor/components/mobile/VideoPlayer/property.vue b/src/components/DiyEditor/components/mobile/VideoPlayer/property.vue
new file mode 100644
index 00000000..96f317d6
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/VideoPlayer/property.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+ 建议宽度750
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index d0d49812..fbb7e103 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -33,111 +33,63 @@
diff --git a/src/layout/components/Message/src/Message.vue b/src/layout/components/Message/src/Message.vue
index 28f796b3..3019df29 100644
--- a/src/layout/components/Message/src/Message.vue
+++ b/src/layout/components/Message/src/Message.vue
@@ -53,7 +53,7 @@ onMounted(() => {
-
diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index c8a3b972..6895440b 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -33,11 +33,10 @@
diff --git a/src/hooks/web/useGuide.ts b/src/hooks/web/useGuide.ts
new file mode 100644
index 00000000..7fd2fb09
--- /dev/null
+++ b/src/hooks/web/useGuide.ts
@@ -0,0 +1,49 @@
+import { Config, driver } from 'driver.js'
+import 'driver.js/dist/driver.css'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const { t } = useI18n()
+
+const { variables } = useDesign()
+
+export const useGuide = (options?: Config) => {
+ const driverObj = driver(
+ options || {
+ showProgress: true,
+ nextBtnText: t('common.nextLabel'),
+ prevBtnText: t('common.prevLabel'),
+ doneBtnText: t('common.doneLabel'),
+ steps: [
+ {
+ element: `#${variables.namespace}-menu`,
+ popover: {
+ title: t('common.menu'),
+ description: t('common.menuDes'),
+ side: 'right'
+ }
+ },
+ {
+ element: `#${variables.namespace}-tool-header`,
+ popover: {
+ title: t('common.tool'),
+ description: t('common.toolDes'),
+ side: 'left'
+ }
+ },
+ {
+ element: `#${variables.namespace}-tags-view`,
+ popover: {
+ title: t('common.tagsView'),
+ description: t('common.tagsViewDes'),
+ side: 'bottom'
+ }
+ }
+ ]
+ }
+ )
+
+ return {
+ ...driverObj
+ }
+}
diff --git a/src/hooks/web/useIntro.ts b/src/hooks/web/useIntro.ts
deleted file mode 100644
index 7fe00845..00000000
--- a/src/hooks/web/useIntro.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import introJs from 'intro.js'
-import { IntroJs, Step, Options } from 'intro.js'
-import 'intro.js/introjs.css'
-
-import { useDesign } from '@/hooks/web/useDesign'
-
-export const useIntro = (setps?: Step[], options?: Options) => {
- const { t } = useI18n()
-
- const { variables } = useDesign()
-
- const defaultSetps: Step[] = setps || [
- {
- element: `#${variables.namespace}-menu`,
- title: t('common.menu'),
- intro: t('common.menuDes'),
- position: 'right'
- },
- {
- element: `#${variables.namespace}-tool-header`,
- title: t('common.tool'),
- intro: t('common.toolDes'),
- position: 'left'
- },
- {
- element: `#${variables.namespace}-tags-view`,
- title: t('common.tagsView'),
- intro: t('common.tagsViewDes'),
- position: 'bottom'
- }
- ]
-
- const defaultOptions: Options = options || {
- prevLabel: t('common.prevLabel'),
- nextLabel: t('common.nextLabel'),
- skipLabel: t('common.skipLabel'),
- doneLabel: t('common.doneLabel')
- }
-
- const introRef: IntroJs = introJs()
-
- introRef.addSteps(defaultSetps).setOptions(defaultOptions)
-
- return {
- introRef
- }
-}
diff --git a/src/hooks/web/useNetwork.ts b/src/hooks/web/useNetwork.ts
new file mode 100644
index 00000000..66fa4464
--- /dev/null
+++ b/src/hooks/web/useNetwork.ts
@@ -0,0 +1,21 @@
+import { ref, onBeforeUnmount } from 'vue'
+
+const useNetwork = () => {
+ const online = ref(true)
+
+ const updateNetwork = () => {
+ online.value = navigator.onLine
+ }
+
+ window.addEventListener('online', updateNetwork)
+ window.addEventListener('offline', updateNetwork)
+
+ onBeforeUnmount(() => {
+ window.removeEventListener('online', updateNetwork)
+ window.removeEventListener('offline', updateNetwork)
+ })
+
+ return { online }
+}
+
+export { useNetwork }
diff --git a/src/hooks/web/useNow.ts b/src/hooks/web/useNow.ts
new file mode 100644
index 00000000..09d3176b
--- /dev/null
+++ b/src/hooks/web/useNow.ts
@@ -0,0 +1,60 @@
+import { dateUtil } from '@/utils/dateUtil'
+import { reactive, toRefs } from 'vue'
+import { tryOnMounted, tryOnUnmounted } from '@vueuse/core'
+
+export const useNow = (immediate = true) => {
+ let timer: IntervalHandle
+
+ const state = reactive({
+ year: 0,
+ month: 0,
+ week: '',
+ day: 0,
+ hour: '',
+ minute: '',
+ second: 0,
+ meridiem: ''
+ })
+
+ const update = () => {
+ const now = dateUtil()
+
+ const h = now.format('HH')
+ const m = now.format('mm')
+ const s = now.get('s')
+
+ state.year = now.get('y')
+ state.month = now.get('M') + 1
+ state.week = '星期' + ['日', '一', '二', '三', '四', '五', '六'][now.day()]
+ state.day = now.get('date')
+ state.hour = h
+ state.minute = m
+ state.second = s
+
+ state.meridiem = now.format('A')
+ }
+
+ function start() {
+ update()
+ clearInterval(timer)
+ timer = setInterval(() => update(), 1000)
+ }
+
+ function stop() {
+ clearInterval(timer)
+ }
+
+ tryOnMounted(() => {
+ immediate && start()
+ })
+
+ tryOnUnmounted(() => {
+ stop()
+ })
+
+ return {
+ ...toRefs(state),
+ start,
+ stop
+ }
+}
diff --git a/src/hooks/web/useTagsView.ts b/src/hooks/web/useTagsView.ts
new file mode 100644
index 00000000..31eadb02
--- /dev/null
+++ b/src/hooks/web/useTagsView.ts
@@ -0,0 +1,63 @@
+import { useTagsViewStoreWithOut } from '@/store/modules/tagsView'
+import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router'
+import { computed, nextTick, unref } from 'vue'
+
+export const useTagsView = () => {
+ const tagsViewStore = useTagsViewStoreWithOut()
+
+ const { replace, currentRoute } = useRouter()
+
+ const selectedTag = computed(() => tagsViewStore.getSelectedTag)
+
+ const closeAll = (callback?: Fn) => {
+ tagsViewStore.delAllViews()
+ callback?.()
+ }
+
+ const closeLeft = (callback?: Fn) => {
+ tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+ callback?.()
+ }
+
+ const closeRight = (callback?: Fn) => {
+ tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+ callback?.()
+ }
+
+ const closeOther = (callback?: Fn) => {
+ tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+ callback?.()
+ }
+
+ const closeCurrent = (view?: RouteLocationNormalizedLoaded, callback?: Fn) => {
+ if (view?.meta?.affix) return
+ tagsViewStore.delView(view || unref(currentRoute))
+
+ callback?.()
+ }
+
+ const refreshPage = async (view?: RouteLocationNormalizedLoaded, callback?: Fn) => {
+ tagsViewStore.delCachedView()
+ const { path, query } = view || unref(currentRoute)
+ await nextTick()
+ replace({
+ path: '/redirect' + path,
+ query: query
+ })
+ callback?.()
+ }
+
+ const setTitle = (title: string, path?: string) => {
+ tagsViewStore.setTitle(title, path)
+ }
+
+ return {
+ closeAll,
+ closeLeft,
+ closeRight,
+ closeOther,
+ closeCurrent,
+ refreshPage,
+ setTitle
+ }
+}
diff --git a/src/hooks/web/useValidator.ts b/src/hooks/web/useValidator.ts
index 0c16fa31..151e35b2 100644
--- a/src/hooks/web/useValidator.ts
+++ b/src/hooks/web/useValidator.ts
@@ -1,54 +1,53 @@
-const { t } = useI18n()
+import { useI18n } from '@/hooks/web/useI18n'
+import { FormItemRule } from 'element-plus'
-type Callback = (error?: string | Error | undefined) => void
+const { t } = useI18n()
interface LengthRange {
min: number
max: number
- message: string
+ message?: string
}
export const useValidator = () => {
- const required = (message?: string) => {
+ const required = (message?: string): FormItemRule => {
return {
required: true,
message: message || t('common.required')
}
}
- const lengthRange = (val: any, callback: Callback, options: LengthRange) => {
+ const lengthRange = (options: LengthRange): FormItemRule => {
const { min, max, message } = options
- if (val.length < min || val.length > max) {
- callback(new Error(message))
- } else {
- callback()
+
+ return {
+ min,
+ max,
+ message: message || t('common.lengthRange', { min, max })
}
}
- const notSpace = (val: any, callback: Callback, message: string) => {
- // 用户名不能有空格
- if (val.indexOf(' ') !== -1) {
- callback(new Error(message))
- } else {
- callback()
+ const notSpace = (message?: string): FormItemRule => {
+ return {
+ validator: (_, val, callback) => {
+ if (val?.indexOf(' ') !== -1) {
+ callback(new Error(message || t('common.notSpace')))
+ } else {
+ callback()
+ }
+ }
}
}
- const notSpecialCharacters = (val: any, callback: Callback, message: string) => {
- // 密码不能是特殊字符
- if (/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/gi.test(val)) {
- callback(new Error(message))
- } else {
- callback()
- }
- }
-
- // 两个字符串是否想等
- const isEqual = (val1: string, val2: string, callback: Callback, message: string) => {
- if (val1 === val2) {
- callback()
- } else {
- callback(new Error(message))
+ const notSpecialCharacters = (message?: string): FormItemRule => {
+ return {
+ validator: (_, val, callback) => {
+ if (/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/gi.test(val)) {
+ callback(new Error(message || t('common.notSpecialCharacters')))
+ } else {
+ callback()
+ }
+ }
}
}
@@ -56,7 +55,6 @@ export const useValidator = () => {
required,
lengthRange,
notSpace,
- notSpecialCharacters,
- isEqual
+ notSpecialCharacters
}
}
diff --git a/src/layout/components/Footer/src/Footer.vue b/src/layout/components/Footer/src/Footer.vue
index c350e38a..3eede386 100644
--- a/src/layout/components/Footer/src/Footer.vue
+++ b/src/layout/components/Footer/src/Footer.vue
@@ -19,6 +19,6 @@ const title = computed(() => appStore.getTitle)
:class="prefixCls"
class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center leading-[var(--app-footer-height)] text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)]"
>
-
-
-
-
-
-
@@ -178,8 +130,6 @@ export default {
- {{ titel }}
+ {{ title }}
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ element.name }}
-
-
-
-
-
-
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
Copyright ©2022-{{ title }}
+ Copyright ©2022-{{ title }}
+
-
@@ -67,7 +67,7 @@ onMounted(() => {
@@ -67,7 +67,7 @@ onMounted(() => {