ZF/yudao-ui-go-view
1
0
Fork 0
mirror of https://gitee.com/yudaocode/yudao-ui-go-view.git synced 2025-12-30 09:32:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

增加默认路由开关

Browse Source 
修复路由错误问题
增加组件自定义增强样式
增加父组件容器ID
This commit is contained in:
EarlySummer
2024-12-04 16:51:13 +08:00
parent 65ac5c5632
commit c8c3279358
15 changed files with 281 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env
View File

@@ -13,3 +13,6 @@ VITE_APP_TENANT_ENABLE=true
# 验证码的开关
VITE_APP_CAPTCHA_ENABLE=true
#默认路由开关
VITE_ROUTER_DEFAULT=true

4
src/components/Pages/MonacoEditor/EditorWorker.vue
View File

@@ -6,6 +6,7 @@ import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
self.MonacoEnvironment = {
getWorker(workerId, label) {
@@ -18,6 +19,9 @@ self.MonacoEnvironment = {
if (label === 'html') {
return new htmlWorker()
}
if (label === 'css') {
return new cssWorker()
}
return new editorWorker()
}
}

2
src/packages/components/Informations/Texts/TextCard/index.vue
View File

@@ -131,7 +131,7 @@ console.log('22222222222222222222223')
// 滚动处理
const startScrollAnimation = () => {
const totalHeight = itemHeight.value * dataList.value.length;
const totalHeight = itemHeight.value * props.chartConfig.option.dataset.lenght;
timer = setInterval(() => {
console.log('滚动测试...')
scrollY.value -= itemHeight.value;

7
src/packages/index.d.ts vendored
View File

@@ -100,7 +100,9 @@ export enum FilterEnum {
//动画时长
CIRCULATE_PLAY_TIME = 'circulatePlayTime',
//动画延迟时长
CIRCULATE_DELAY_TIME = 'circulateDelayTime'
CIRCULATE_DELAY_TIME = 'circulateDelayTime',
//样式增强
STYLE_ENHANCE= 'styleEnhance',
}
@@ -163,6 +165,9 @@ export interface PublicConfigType {
// 动画延迟时长/秒
[FilterEnum.CIRCULATE_DELAY_TIME]: number,
// 样式自定义增强
[FilterEnum.STYLE_ENHANCE]: string,
}
preview?: {
// 预览超出隐藏

3
src/packages/public/publicConfig.ts
View File

@@ -89,6 +89,9 @@ export class PublicConfigClass implements PublicConfigType {
circulatePlayTime:1,
// 动画延迟时长/秒
circulateDelayTime:0,
//自定义样式增强
styleEnhance:"",
}
// 预览

2
src/router/index.ts
View File

@@ -28,7 +28,7 @@ const RootRoute: Array<RouteRecordRaw> = [
]
export const constantRouter: any[] = [LoginRoute, ...RootRoute, RedirectRoute, ReloadRoute];
export const constantRouter: any[] = [LoginRoute, ...RootRoute, ReloadRoute];
const router = createRouter({
history: createWebHashHistory(''),

23
src/router/router-guards.ts
View File

@@ -1,7 +1,7 @@
import { Router } from 'vue-router';
import { PageEnum, PreviewEnum } from '@/enums/pageEnum'
import {loginCheck, setSessionStorage} from '@/utils'
const viteRouter = import.meta.env.VITE_ROUTER_DEFAULT
// 路由白名单
const routerAllowList = [
// 登录
@@ -32,17 +32,20 @@ export function createRouterGuards(router: Router) {
// @ts-ignore
console.log(!routerAllowList.includes(to.name), !loginCheck())
// @ts-ignore
if (!routerAllowList.includes(to.name) && !loginCheck()) {
console.log(to.fullPath,'存储临时跳回路径与查询ID')
if(PreviewEnum.CHART_PREVIEW_NAME === to.name){
setSessionStorage('setRedirectPath','/chart/preview')
setSessionStorage('setRedirectPathId',to.params.id[0])
}
console.log('test...login....')
next({ name: PageEnum.BASE_LOGIN_NAME })
return
console.log('路由开关:',viteRouter==='false')
console.log('路由开关2:',viteRouter,!viteRouter,!!viteRouter)
console.log(!routerAllowList.includes(<PageEnum>to.name),!loginCheck())
if (!routerAllowList.includes(<PageEnum>to.name)&&!loginCheck()) {
if(PreviewEnum.CHART_PREVIEW_NAME === to.name&& viteRouter==='false'){
console.log(to.fullPath,'存储临时跳回路径与查询ID')
setSessionStorage('setRedirectPath','/chart/preview')
setSessionStorage('setRedirectPathId',to.params.id[0])
}
console.log('test...login....')
next({ name: PageEnum.BASE_LOGIN_NAME })
}
console.log('test。。。next。。。')
console.log("现地址",to.path,"重定向前地址",to.redirectedFrom?.path)
next()
})

2
src/utils/router.ts
View File

@@ -73,9 +73,11 @@ export const routerTurnByPath = (
if (query?.length) {
fullPath = `${path}/${query.join('/')}`
}
if (windowOpen) {
return openNewWindow(fullPath)
}
if (isReplace) {
router.replace({
path: fullPath,

4
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/css-validator.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module 'css-validator' {
export function validateCSS(css: string, callback?: (isValid: boolean) => void): void;
export function validateCSSAsync(css: string): Promise<boolean>;
}

3
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import ChartStyleEnhance from './index.vue'
export { ChartStyleEnhance }

233
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/index.vue Normal file
View File

@@ -0,0 +1,233 @@
<template>
<n-collapse-item title="样式增强编辑器" name="4">
<template #header-extra>
<n-button type="primary" tertiary size="small" @click.stop="showModal = true">
<template #icon>
<n-icon>
<pencil-icon />
</n-icon>
</template>
编辑
</n-button>
</template>
<n-card class="collapse-show-box">
<!-- 函数体 -->
<div >
<p>
<span class="func-annotate">// 样式增强</span>
<br />
<span class="func-keyword">&lt;style&gt; </span>
</p>
<p class="go-ml-4">
<n-code :code="targetData.styles.styleEnhance || ''" language="css"></n-code>
</p>
<p>
<span class="func-keyword">&lt;/style&gt;</span>
</p>
</div>
</n-card>
</n-collapse-item>
<!-- 弹窗 -->
<n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
<template #header>
<n-space>
<n-text>样式增强编辑器</n-text>
</n-space>
</template>
<template #header-extra> </template>
<n-layout has-sider sider-placement="right">
<n-layout style="height: 580px; padding-right: 20px">
<!-- 提示 -->
<template #suffix>
<n-text class="tab-tip" type="warning">提示:请配合组件ID使用样式</n-text>
</template>
<n-tab-pane
tab="CSS样式增强"
name="CSS样式增强"
>
<!-- 函数名称 -->
<p class="go-pl-3">
<span class="func-keyword">&lt;style&gt; </span>
<span class="func-keyNameWord"></span>
</p>
<!-- 编辑主体 -->
<monaco-editor v-model:modelValue="baseEvent" height="480px" language="css" />
<!-- 函数结束 -->
<p class="go-pl-3 func-keyword">
&lt;/style&gt;
</p>
</n-tab-pane>
</n-layout>
<n-layout-sider
:collapsed-width="14"
:width="340"
show-trigger="bar"
collapse-mode="transform"
content-style="padding: 12px 12px 0px 12px;margin-left: 3px;"
>
<!-- <n-tabs default-value="1" justify-content="space-evenly" type="segment">-->
<!-- 验证结果 -->
<!-- <n-tab-pane tab="验证结果" name="1" size="small">-->
<!-- <n-scrollbar trigger="none" style="max-height: 505px">-->
<!-- <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2, 3]">-->
<!-- <template v-for="error in [validEvents()]" :key="error">-->
<!-- <n-collapse-item title="错误函数" :name="1">-->
<!-- <n-text depth="3">{{ error.errorFn || '暂无' }}</n-text>-->
<!-- </n-collapse-item>-->
<!-- <n-collapse-item title="错误信息" :name="2">-->
<!-- <n-text depth="3">{{ error.name || '暂无' }}</n-text>-->
<!-- </n-collapse-item>-->
<!-- <n-collapse-item title="堆栈信息" :name="3">-->
<!-- <n-text depth="3">{{ error.message || '暂无' }}</n-text>-->
<!-- </n-collapse-item>-->
<!-- </template>-->
<!-- </n-collapse>-->
<!-- </n-scrollbar>-->
<!-- </n-tab-pane>-->
<!-- &lt;!&ndash; 辅助说明 &ndash;&gt;-->
<!-- <n-tab-pane tab="变量说明" name="2">-->
<!-- <n-scrollbar trigger="none" style="max-height: 505px">-->
<!-- <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2]">-->
<!-- <n-collapse-item title="mouseEvent" :name="1">-->
<!-- <n-text depth="3">鼠标事件对象</n-text>-->
<!-- </n-collapse-item>-->
<!-- </n-collapse>-->
<!-- </n-scrollbar>-->
<!-- </n-tab-pane>-->
<!-- </n-tabs>-->
</n-layout-sider>
</n-layout>
<template #action>
<n-space justify="space-between">
<div class="go-flex-items-center">
<n-tag :bordered="false" type="primary">
<template #icon>
<n-icon :component="DocumentTextIcon" />
</template>
说明
</n-tag>
<n-text class="go-ml-2" depth="2">编写方式同正常 CSS 写法</n-text>
</div>
<n-space>
<n-button size="medium" @click="closeEvents">取消</n-button>
<n-button size="medium" type="primary" @click="saveEvents">保存</n-button>
</n-space>
</n-space>
</template>
</n-card>
</n-modal>
</template>
<script setup lang="ts">
import { ref, computed, watch, toRefs, toRaw } from 'vue'
import { MonacoEditor } from '@/components/Pages/MonacoEditor'
import { useTargetData } from '../../../hooks/useTargetData.hook'
import { BaseEvent } from '@/enums/eventEnum'
import { icon } from '@/plugins'
const { targetData, chartEditStore } = useTargetData()
const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5
// import { validateCSS } from 'css-validator';
// import Linter from 'stylelint';
const EventTypeName = {
cssEnhance: 'CSS样式'
}
// 受控弹窗
const showModal = ref(false)
// const linter = new Linter();
// events 函数模板
let baseEvent = ref(targetData.value.styles.styleEnhance)
// 事件错误标识
const errorFlag = ref(false)
// 验证语法
// const validEvents = () => {
// let errorFn = ''
// let message = ''
// let name = ''
//
// linter.lint({
// code: baseEvent.value,
// // 如果你的配置文件在项目的根目录，可以省略config参数
// // config: '.stylelint.config.js',
// }, (err:any) => {
// if (err) {
// console.error('Stylelint error:', err);
// } else {
// console.log('No stylelint errors found.');
// }
// });
//
//
// try {
// validateCSS( baseEvent.value, (isValid) => {
// // message = data.validity
// // name = data.errors
// // errorFn = data.warnings
// return isValid
// });
// } catch (error: any) {
// message = error.message
// name = error.name
//
// return false
// }
// // errorFlag.value = Object.entries(baseEvent.value).every(([eventName, str]) => {
// // try {
// // // 支持await，验证语法
// // const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
// // new AsyncFunction(str)
// // return true
// // } catch (error: any) {
// // message = error.message
// // name = error.name
// // errorFn = eventName
// // return false
// // }
// // })
// return {
// errorFn,
// message,
// name
// }
// }
// 关闭事件
const closeEvents = () => {
showModal.value = false
}
// 新增事件
const saveEvents = () => {
// if (validEvents().errorFn) {
// window['$message'].error('事件函数错误，无法进行保存')
// return
// }
targetData.value.styles.styleEnhance = baseEvent.value
closeEvents()
}
watch(
() => showModal.value,
(newData: boolean) => {
if (newData) {
baseEvent.value = targetData.value.styles.styleEnhance
}
}
)
</script>
<style lang="scss" scoped>
@import '../index.scss';
</style>

2
src/views/chart/ContentConfigurations/components/ChartEvent/index.vue
View File

@@ -8,6 +8,7 @@
<chart-event-interaction></chart-event-interaction>
<chart-event-base-handle></chart-event-base-handle>
<chart-event-advanced-handle></chart-event-advanced-handle>
<chart-style-enhance></chart-style-enhance>
</n-collapse>
</template>
@@ -16,6 +17,7 @@ import { ref } from 'vue'
import { ChartEventInteraction } from './components/ChartEventInteraction'
import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'
import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'
import { ChartStyleEnhance } from './components/ChartStyleEnhance'
import { useTargetData } from '../hooks/useTargetData.hook'
const { targetData } = useTargetData()

15
src/views/login/index.vue
View File

@@ -171,7 +171,7 @@ const autoLogin = ref(true)
const show = ref(false)
const showBg = ref(false)
const systemStore = useSystemStore()
const viteRouter = import.meta.env.VITE_ROUTER_DEFAULT
const t = window['$t']
const formInline = reactive({
@@ -302,23 +302,18 @@ const handleSubmit = async (params: any) => {
window['$message'].success(t('login.login_success'))
const redirectPath = getSessionStorage('setRedirectPath')
const redirectPath:string = getSessionStorage('setRedirectPath') as string
const redirectPathId = getSessionStorage('setRedirectPathId')
console.log(redirectPath)
console.log(redirectPathId)
if(redirectPath){
if(redirectPath && viteRouter==='false'){
console.log("重定向缓存页面",redirectPath,viteRouter,!viteRouter,!!viteRouter)
routerTurnByPath(redirectPath,[redirectPathId],true,false)
}else{
if(getSessionStorage('setRedirectPath')) {
console.log("重定向到登录页")
routerTurnByPath(getSessionStorage('setRedirectPath'));
}else{
console.log("重定向到首页》》》")
routerTurnByName(PageEnum.BASE_HOME_NAME, true);
}
}
// routerTurnByName(PageEnum.BASE_HOME_NAME, true)
}
loading.value = false
} else {

1
src/views/preview/components/PreviewRenderList/index.vue
View File

@@ -1,6 +1,7 @@
<template>
<div
class="chart-item"
:id="item.id+'_parent'"
v-for="(item, index) in chartEditStore.componentList"
:class="[animationsIsOpenClass(item.styles), !item.isGroup && 'hidden',getAnimationsRepeatClass(item.styles)]"
:key="item.id"

5
src/views/preview/utils/storage.ts
View File

@@ -15,10 +15,8 @@ export interface ChartEditStorageType extends ChartEditStorage {
export const getSessionStorageInfo = async () => {
const id = fetchRouteParamsLocation()
const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST)
console.log(storageList)
// 是否本地预览
if (!storageList || storageList.findIndex(e => e.id === id.toString()) === -1) {
console.log("否本地预览")
// 接口调用
const res = await fetchProjectApi({ id: id })
if (res && res.code === ResultEnum.SUCCESS) {
@@ -28,7 +26,6 @@ export const getSessionStorageInfo = async () => {
return { isRelease: false }
}
const chartEitStorageType = content as unknown as ChartEditStorageType
console.log(chartEitStorageType)
chartEditStore.editCanvasConfig = chartEitStorageType.editCanvasConfig
chartEditStore.requestGlobalConfig = chartEitStorageType.requestGlobalConfig
chartEditStore.componentList = chartEitStorageType.componentList
@@ -37,8 +34,6 @@ export const getSessionStorageInfo = async () => {
httpErrorHandle()
}
} else {
console.log("是本地预览")
// 本地读取
for (let i = 0; i < storageList.length; i++) {
if (id.toString() === storageList[i]['id']) {