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

Merge pull request !4 from EarlySummer/master
2025-12-30 09:32:27 +00:00 · 2024-12-07 02:33:31 +00:00
parent ebdc740e25 c8c3279358
commit 2dc8da714c
15 changed files with 281 additions and 28 deletions
--- a/.env
+++ b/.env
@@ -13,3 +13,6 @@ VITE_APP_TENANT_ENABLE=true

 # 验证码的开关
 VITE_APP_CAPTCHA_ENABLE=true
+
+#默认路由开关
+VITE_ROUTER_DEFAULT=true
--- a/src/components/Pages/MonacoEditor/EditorWorker.vue
+++ b/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()
  }
 }
--- a/src/packages/components/Informations/Texts/TextCard/index.vue
+++ b/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;
--- a/src/packages/index.d.ts
+++ b/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?: {
    // 预览超出隐藏
--- a/src/packages/public/publicConfig.ts
+++ b/src/packages/public/publicConfig.ts
@@ -89,6 +89,9 @@ export class PublicConfigClass implements PublicConfigType {
    circulatePlayTime:1,
    // 动画延迟时长/秒
    circulateDelayTime:0,
+    //自定义样式增强
+    styleEnhance:"",
+

  }
  // 预览
--- a/src/router/index.ts
+++ b/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(''),
--- a/src/router/router-guards.ts
+++ b/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()
  })

--- a/src/utils/router.ts
+++ b/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,
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/css-validator.d.ts
+++ b/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>;
+}
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/index.ts
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/index.ts
@@ -0,0 +1,3 @@
+import  ChartStyleEnhance from './index.vue'
+
+export { ChartStyleEnhance }
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartStyleEnhance/index.vue
+++ b/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>
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue
+++ b/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()
--- a/src/views/login/index.vue
+++ b/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 {
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/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"
--- a/src/views/preview/utils/storage.ts
+++ b/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']) {