!4 增加默认路由开关 修复路由错误问题 增加组件自定义增强样式 增加父组件容器ID

Merge pull request !4 from EarlySummer/master

.env

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

src/components/Pages/MonacoEditor/EditorWorker.vue

@@ -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()
   }
 }

src/packages/components/Informations/Texts/TextCard/index.vue

@@ -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;

src/packages/index.d.ts

@@ -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?: {
     // 预览超出隐藏

src/packages/public/publicConfig.ts

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

src/router/index.ts

@@ -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(''),

src/router/router-guards.ts

@@ -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()
   })
 

src/utils/router.ts

@@ -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,

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/css-validator.d.ts

@@ -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>;
+}

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/index.ts

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

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/index.vue

@@ -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>

src/views/chart/ContentConfigurations/components/ChartEvent/index.vue

@@ -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()

src/views/login/index.vue

@@ -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 {

src/views/preview/components/PreviewRenderList/index.vue

@@ -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"

src/views/preview/utils/storage.ts

@@ -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']) {