样式规范

src/views/workflow/chart/context-menu-tool.vue

@@ -26,12 +26,12 @@ const onDel = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 .context-menu-tool {
   min-width: 100px;
   padding: 10px;
   background-color: #ffffff;
-  border: $borderStyle;
+  border: style.$borderStyle;
   border-radius: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   .del {

src/views/workflow/chart/node-add.vue

@@ -82,7 +82,7 @@ const onAddNode = (type) => {
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 
 .port {
   width: 100%;
@@ -90,7 +90,7 @@ const onAddNode = (type) => {
   >div {
     width: 100%;
     height: 100%;
-    border: $borderStyle;
+    border: style.$borderStyle;
     background-color: #ffffff;
     border-radius: 50%;
   }

src/views/workflow/chart/node-index.vue

@@ -36,11 +36,11 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 
 .node {
   z-index: 10;
-  border: $borderStyle;
+  border: style.$borderStyle;
   border-radius: 10px;
   background-color: #ffffff;
   position: absolute;

src/views/workflow/chart/panel-index.vue

@@ -39,7 +39,7 @@ const nodeDataCpt = computed(() => WorkflowStore.panel.node?.data || {})
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 
 .panel {
   position: fixed;
@@ -55,7 +55,7 @@ const nodeDataCpt = computed(() => WorkflowStore.panel.node?.data || {})
   border-radius: 10px 0 0 10px;
   .panel-header {
     padding: 16px;
-    border-bottom: $borderStyle;
+    border-bottom: style.$borderStyle;
     display: flex;
     justify-content: space-between;
     align-items: center;

src/views/workflow/instance/answer/panel/index.vue

@@ -33,5 +33,5 @@ watch(() => props.node, (n) => {
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 </style>

src/views/workflow/instance/component/condition/index.vue

@@ -46,7 +46,7 @@ const state: any = reactive({})
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 
 .condition-main {
   flex: 1;
@@ -60,7 +60,7 @@ const state: any = reactive({})
     justify-content: center;
     position: relative;
     >div:nth-child(1) {
-      border: $borderStyle;
+      border: style.$borderStyle;
       width: 10px;
       height: 100%;
       border-radius: 8px 0 0 8px;
@@ -79,7 +79,7 @@ const state: any = reactive({})
     >div:nth-child(3) {
       z-index: 3;
       color: var(--czr-main-color);
-      border:  $borderStyle;
+      border: style.$borderStyle;
       border-radius: 4px;
       display: flex;
       align-items: center;
@@ -99,10 +99,10 @@ const state: any = reactive({})
       display: flex;
       .condition-item-body {
         border-radius: 8px;
-        background-color: $inputBg;
+        background-color: style.$inputBg;
         flex: 1;
         .top {
-          border-bottom: $borderStyle;
+          border-bottom: style.$borderStyle;
           padding: 6px;
           display: flex;
           align-items: center;

src/views/workflow/instance/component/style.scss

@@ -1,5 +1,5 @@
-$borderStyle: 1px solid rgba(0, 0, 0, 0.1);
-$inputBg: #c8ceda40;
+$borderStyle: 1px solid rgba(0, 0, 0, 0.1) !default;
+$inputBg: #c8ceda40 !default;
 
 ._p-title {
   margin: 10px 0;

src/views/workflow/instance/component/vars/vars-detail.vue

@@ -107,7 +107,7 @@ const onSubmit = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 
 .vars-detail {
   padding: 10px 20px 0;
@@ -119,7 +119,7 @@ const onSubmit = () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      border: $borderStyle;
+      border: style.$borderStyle;
       border-radius: 8px;
       padding: 20px;
       &.active, &:hover {

src/views/workflow/instance/component/vars/vars-popover.vue

@@ -84,12 +84,12 @@ watch(() => state.show, (n) => {
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 
 .vars-select-block {
   .filter {
     padding: 10px;
-    border-bottom: $borderStyle;
+    border-bottom: style.$borderStyle;
   }
   .list {
     padding: 4px;

src/views/workflow/instance/component/vars/vars-select.vue

@@ -31,10 +31,10 @@ const state: any = reactive({
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 
 .vars-display {
-  border: $borderStyle;
+  border: style.$borderStyle;
   width: 100%;
   padding: 4px 4px;
   border-radius: 4px;
@@ -42,7 +42,7 @@ const state: any = reactive({
   display: flex;
   align-items: center;
   position: relative;
-  background-color: $inputBg;
+  background-color: style.$inputBg;
   .del {
     position: absolute;
     right: 0;

src/views/workflow/instance/if-else/panel/index.vue

@@ -88,14 +88,14 @@ const onAddCondition = (caseIndex, vars) => {
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 
 .panel-block {
   .case-list {
     display: flex;
     flex-direction: column;
     .case-item {
-      border-bottom: $borderStyle;
+      border-bottom: style.$borderStyle;
       padding: 10px 0;
       font-size: 13px;
       .cast-title {

src/views/workflow/instance/root/panel/index.vue

@@ -78,7 +78,7 @@ const setVars = (val) => {
 </script>
 
 <style lang="scss" scoped>
-@import "@/views/workflow/instance/component/style";
+@use "@/views/workflow/instance/component/style";
 
 .panel-block {
   .vars {
@@ -87,7 +87,7 @@ const setVars = (val) => {
     gap: 6px;
     .item {
       padding: 6px 10px;
-      border: $borderStyle;
+      border: style.$borderStyle;
       border-radius: 8px;
     }
   }