fix(视图):尝试解决源码运行，视图类型样式错乱的问题

frontend/src/styles/index.scss

@@ -396,30 +396,30 @@ div:focus {
 }
 
 .blackTheme .el-textarea__inner {
-    color: var(--TableColor) !important;  
-    background-color: var(--MainBG) !important;    
+    color: var(--TableColor) !important;
+    background-color: var(--MainBG) !important;
 }
 .blackTheme .el-textarea__inner:not(:focus) {
-    color: var(--TableColor) !important;  
+    color: var(--TableColor) !important;
     border-color: var(--border-color-input) !important;
 }
 
 .blackTheme .el-input__inner {
     background-color: var(--MainBG) !important;
-    color: var(--TableColor) !important;    
+    color: var(--TableColor) !important;
 }
 .blackTheme .el-input__inner:not(:focus) {
-    color: var(--TableColor) !important;  
+    color: var(--TableColor) !important;
     border-color: var(--border-color-input) !important;
 }
 
 .blackTheme .el-input-number__decrease {
-    color: var(--TableColor) !important;  
+    color: var(--TableColor) !important;
     background-color: var(--MainBG) !important;
     border: none !important;
 }
 .blackTheme .el-input-number__increase {
-    color: var(--TableColor) !important;  
+    color: var(--TableColor) !important;
     background-color: var(--MainBG) !important;
     border: none !important;
 }
@@ -431,13 +431,13 @@ div:focus {
 
 .el-pagination {
     button:disabled {
-        color: var(--TableColor) !important;  
+        color: var(--TableColor) !important;
         background-color: var(--MainBG) !important;
     }
 }
 
 /* .blackTheme .el-pager li {
-    color: var(--TableColor) !important;  
+    color: var(--TableColor) !important;
     background-color: var(--MainBG) !important;
 } */
 
@@ -450,11 +450,11 @@ div:focus {
 }
 
 .blackTheme .fu-quick-search input {
-    color: var(--TableColor) !important;  
+    color: var(--TableColor) !important;
     background-color: var(--MainBG) !important;
 }
 .blackTheme .vue-treeselect__single-value {
-    color: var(--TableColor) !important;  
+    color: var(--TableColor) !important;
 }
 .blackTheme .el-tag.el-tag--info {
     background-color: var(--ContentBG);
@@ -474,13 +474,13 @@ div:focus {
 
 .blackTheme .main-area-input {
     input.el-input__inner {
-        color: var(--TableColor) !important;  
+        color: var(--TableColor) !important;
         background-color: var(--ContentBG) !important;
     }
     .el-input-group__append {
         background-color: var(--ContentBG) !important;
         border-color: var(--ContentBG) !important;
-    }    
+    }
 }
 
 .blackTheme .el-tree {
@@ -531,7 +531,7 @@ div:focus {
 }
 
 .blackTheme:not(.in-panel) .elx-table--main-wrapper {
-    
+
     .body--wrapper {
         background-color: var(--TableBG) !important;
     }
@@ -684,3 +684,12 @@ div:focus {
   background: linear-gradient(to right, #fff, rgba(255,255,255,0)) !important;
 }
 
+.chart-type .el-radio__input{
+  display: none!important;
+}
+
+.chart-type .el-radio__label{
+  padding-left: 0!important;
+}
+
+

frontend/src/views/chart/view/ChartEdit.vue

@@ -1880,22 +1880,11 @@ export default {
     height: calc(100% - 6px);
   }
 
-  .chart-type{
-    padding: 4px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-
   .chart-icon{
     width: 20px;
     height: 20px;
   }
 
-  .chart-type>>>.el-radio__input{
-    display: none !important;
-  }
-
   .el-radio{
     margin:5px;
   }

frontend/src/views/chart/view/ChartType.vue

@@ -5,7 +5,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="table-normal" label="table-normal" border>
+            <el-radio value="table-normal" label="table-normal" border class="radio-style">
               <span :title="$t('chart.chart_table_normal')">
                 <svg-icon icon-class="table-normal" class="chart-icon" />
               </span>
@@ -13,7 +13,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="table-info" label="table-info" border>
+            <el-radio value="table-info" label="table-info" border class="radio-style">
               <span :title="$t('chart.chart_table_info')">
                 <svg-icon icon-class="table-info" class="chart-icon" />
               </span>
@@ -28,7 +28,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="text" label="text" border>
+            <el-radio value="text" label="text" border class="radio-style">
               <span :title="$t('chart.chart_card')">
                 <svg-icon icon-class="text" class="chart-icon" />
               </span>
@@ -36,7 +36,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="gauge" label="gauge" border>
+            <el-radio value="gauge" label="gauge" border class="radio-style">
               <span :title="$t('chart.chart_gauge')">
                 <svg-icon icon-class="gauge" class="chart-icon" />
               </span>
@@ -44,7 +44,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="liquid" label="liquid" border>
+            <el-radio value="liquid" label="liquid" border class="radio-style">
               <span :title="$t('chart.chart_liquid')">
                 <svg-icon icon-class="liquid" class="chart-icon" />
               </span>
@@ -58,7 +58,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="line" label="line" border>
+            <el-radio value="line" label="line" border class="radio-style">
               <span :title="$t('chart.chart_line')">
                 <svg-icon icon-class="line" class="chart-icon" />
               </span>
@@ -66,7 +66,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="line-stack" label="line-stack" border>
+            <el-radio value="line-stack" label="line-stack" border class="radio-style">
               <span :title="$t('chart.chart_line_stack')">
                 <svg-icon icon-class="line-stack" class="chart-icon" />
               </span>
@@ -81,7 +81,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="bar" label="bar" border>
+            <el-radio value="bar" label="bar" border class="radio-style">
               <span :title="$t('chart.chart_bar')">
                 <svg-icon icon-class="bar" class="chart-icon" />
               </span>
@@ -89,7 +89,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="bar-stack" label="bar-stack" border>
+            <el-radio value="bar-stack" label="bar-stack" border class="radio-style">
               <span :title="$t('chart.chart_bar_stack')">
                 <svg-icon icon-class="bar-stack" class="chart-icon" />
               </span>
@@ -97,7 +97,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="waterfall" label="waterfall" border>
+            <el-radio value="waterfall" label="waterfall" border class="radio-style">
               <span :title="$t('chart.chart_waterfall')">
                 <svg-icon icon-class="waterfall" class="chart-icon" />
               </span>
@@ -109,7 +109,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="bar-horizontal" label="bar-horizontal" border>
+            <el-radio value="bar-horizontal" label="bar-horizontal" border class="radio-style">
               <span :title="$t('chart.chart_bar_horizontal')">
                 <svg-icon icon-class="bar-horizontal" class="chart-icon" />
               </span>
@@ -117,7 +117,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border>
+            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border class="radio-style">
               <span :title="$t('chart.chart_bar_stack_horizontal')">
                 <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
               </span>
@@ -132,7 +132,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="pie" label="pie" border>
+            <el-radio value="pie" label="pie" border class="radio-style">
               <span :title="$t('chart.chart_pie')">
                 <svg-icon icon-class="pie" class="chart-icon" />
               </span>
@@ -140,7 +140,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="pie-rose" label="pie-rose" border>
+            <el-radio value="pie-rose" label="pie-rose" border class="radio-style">
               <span :title="$t('chart.chart_pie_rose')">
                 <svg-icon icon-class="pie-rose" class="chart-icon" />
               </span>
@@ -148,7 +148,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="radar" label="radar" border>
+            <el-radio value="radar" label="radar" border class="radio-style">
               <span :title="$t('chart.chart_radar')">
                 <svg-icon icon-class="radar" class="chart-icon" />
               </span>
@@ -160,7 +160,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="treemap" label="treemap" border>
+            <el-radio value="treemap" label="treemap" border class="radio-style">
               <span :title="$t('chart.chart_treemap')">
                 <svg-icon icon-class="treemap" class="chart-icon" />
               </span>
@@ -168,7 +168,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="word-cloud" label="word-cloud" border>
+            <el-radio value="word-cloud" label="word-cloud" border class="radio-style">
               <span :title="$t('chart.chart_word_cloud')">
                 <svg-icon icon-class="word-cloud" class="chart-icon" />
               </span>
@@ -183,7 +183,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="scatter" label="scatter" border>
+            <el-radio value="scatter" label="scatter" border class="radio-style">
               <span :title="$t('chart.chart_scatter')">
                 <svg-icon icon-class="scatter" class="chart-icon" />
               </span>
@@ -191,7 +191,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="funnel" label="funnel" border>
+            <el-radio value="funnel" label="funnel" border class="radio-style">
               <span :title="$t('chart.chart_funnel')">
                 <svg-icon icon-class="funnel" class="chart-icon" />
               </span>
@@ -207,7 +207,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="table-normal" label="table-normal" border>
+            <el-radio value="table-normal" label="table-normal" border class="radio-style">
               <span :title="$t('chart.chart_table_normal')">
                 <svg-icon icon-class="table-normal" class="chart-icon" />
               </span>
@@ -215,7 +215,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="table-info" label="table-info" border>
+            <el-radio value="table-info" label="table-info" border class="radio-style">
               <span :title="$t('chart.chart_table_info')">
                 <svg-icon icon-class="table-info" class="chart-icon" />
               </span>
@@ -230,7 +230,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="text" label="text" border>
+            <el-radio value="text" label="text" border class="radio-style">
               <span :title="$t('chart.chart_card')">
                 <svg-icon icon-class="text" class="chart-icon" />
               </span>
@@ -238,7 +238,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="gauge" label="gauge" border>
+            <el-radio value="gauge" label="gauge" border class="radio-style">
               <span :title="$t('chart.chart_gauge')">
                 <svg-icon icon-class="gauge" class="chart-icon" />
               </span>
@@ -253,7 +253,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="line" label="line" border>
+            <el-radio value="line" label="line" border class="radio-style">
               <span :title="$t('chart.chart_line')">
                 <svg-icon icon-class="line" class="chart-icon" />
               </span>
@@ -261,7 +261,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="line-stack" label="line-stack" border>
+            <el-radio value="line-stack" label="line-stack" border class="radio-style">
               <span :title="$t('chart.chart_line_stack')">
                 <svg-icon icon-class="line-stack" class="chart-icon" />
               </span>
@@ -269,7 +269,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="chart-mix" label="chart-mix" border>
+            <el-radio value="chart-mix" label="chart-mix" border class="radio-style">
               <span :title="$t('chart.chart_mix')">
                 <svg-icon icon-class="chart-mix" class="chart-icon" />
               </span>
@@ -283,7 +283,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="bar" label="bar" border>
+            <el-radio value="bar" label="bar" border class="radio-style">
               <span :title="$t('chart.chart_bar')">
                 <svg-icon icon-class="bar" class="chart-icon" />
               </span>
@@ -291,7 +291,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="bar-stack" label="bar-stack" border>
+            <el-radio value="bar-stack" label="bar-stack" border class="radio-style">
               <span :title="$t('chart.chart_bar_stack')">
                 <svg-icon icon-class="bar-stack" class="chart-icon" />
               </span>
@@ -304,7 +304,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="bar-horizontal" label="bar-horizontal" border>
+            <el-radio value="bar-horizontal" label="bar-horizontal" border class="radio-style">
               <span :title="$t('chart.chart_bar_horizontal')">
                 <svg-icon icon-class="bar-horizontal" class="chart-icon" />
               </span>
@@ -312,7 +312,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border>
+            <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border class="radio-style">
               <span :title="$t('chart.chart_bar_stack_horizontal')">
                 <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
               </span>
@@ -327,7 +327,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="pie" label="pie" border>
+            <el-radio value="pie" label="pie" border class="radio-style">
               <span :title="$t('chart.chart_pie')">
                 <svg-icon icon-class="pie" class="chart-icon" />
               </span>
@@ -335,7 +335,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="pie-rose" label="pie-rose" border>
+            <el-radio value="pie-rose" label="pie-rose" border class="radio-style">
               <span :title="$t('chart.chart_pie_rose')">
                 <svg-icon icon-class="pie-rose" class="chart-icon" />
               </span>
@@ -343,7 +343,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="radar" label="radar" border>
+            <el-radio value="radar" label="radar" border class="radio-style">
               <span :title="$t('chart.chart_radar')">
                 <svg-icon icon-class="radar" class="chart-icon" />
               </span>
@@ -355,7 +355,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="treemap" label="treemap" border>
+            <el-radio value="treemap" label="treemap" border class="radio-style">
               <span :title="$t('chart.chart_treemap')">
                 <svg-icon icon-class="treemap" class="chart-icon" />
               </span>
@@ -371,7 +371,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="scatter" label="scatter" border>
+            <el-radio value="scatter" label="scatter" border class="radio-style">
               <span :title="$t('chart.chart_scatter')">
                 <svg-icon icon-class="scatter" class="chart-icon" />
               </span>
@@ -379,7 +379,7 @@
             </el-radio>
           </div>
           <div style="position: relative;display: block;">
-            <el-radio value="funnel" label="funnel" border>
+            <el-radio value="funnel" label="funnel" border class="radio-style">
               <span :title="$t('chart.chart_funnel')">
                 <svg-icon icon-class="funnel" class="chart-icon" />
               </span>
@@ -394,7 +394,7 @@
       <div style="display: block;">
         <div class="radio-row">
           <div style="position: relative;display: block;">
-            <el-radio value="map" label="map" border>
+            <el-radio value="map" label="map" border class="radio-style">
               <span :title="$t('chart.chart_map')">
                 <svg-icon icon-class="map" class="chart-icon" />
               </span>
@@ -447,18 +447,10 @@ export default {
   height: 40px;
 }
 
-.chart-type>>>.el-radio__input{
-  display: none!important;
-}
-
 .el-radio{
   margin:5px;
 }
 
-.el-radio>>>.el-radio__label{
-  padding-left: 0;
-}
-
 .radio-row{
   width: 100%;
   display: flex;
@@ -466,11 +458,6 @@ export default {
   justify-content: space-between;
   flex-direction: row;
   flex-wrap: wrap;
-  >>>.el-radio{
-    width: 80px;
-    height: 60px;
-    padding: 0;
-  }
 }
 
 .chart-type-divider{
@@ -500,4 +487,10 @@ export default {
   white-space: pre;
   font-size: 12px;
 }
+
+.radio-style{
+  width: 80px;
+  height: 60px;
+  padding: 0;
+}
 </style>