feat: refactor the configuration view and implement the optional config for displaying timestamp in Log widget (#492)

src/views/dashboard/configuration/Event.vue

@@ -11,28 +11,22 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div>
-    <span class="label">{{ t("enableAssociate") }}</span>
+  <div class="config-item flex-h">
+    <div class="config-label flex-h mr-20">{{ t("enableAssociate") }}</div>
     <el-switch v-model="eventAssociate" active-text="Yes" inactive-text="No" @change="updateConfig" />
   </div>
-  <div class="footer">
-    <el-button size="small" @click="cancelConfig">
-      {{ t("cancel") }}
-    </el-button>
-    <el-button size="small" type="primary" @click="applyConfig">
-      {{ t("apply") }}
-    </el-button>
-  </div>
+  <ConfigurationFooter />
 </template>
 <script lang="ts" setup>
   import { useI18n } from "vue-i18n";
   import { ref } from "vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import type { LayoutConfig } from "@/types/dashboard";
+  import ConfigurationFooter from "./components/ConfigurationFooter.vue";
+  import "./style.scss";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const originConfig = dashboardStore.selectedGrid;
   const eventAssociate = ref(dashboardStore.selectedGrid?.eventAssociate || false);
 
   function updateConfig() {
@@ -40,37 +34,4 @@ limitations under the License. -->
 
     dashboardStore.selectWidget({ ...selectedGrid, eventAssociate: eventAssociate.value } as LayoutConfig);
   }
-
-  function applyConfig() {
-    dashboardStore.setConfigPanel(false);
-    dashboardStore.setConfigs(dashboardStore.selectedGrid as LayoutConfig);
-  }
-
-  function cancelConfig() {
-    dashboardStore.selectWidget(originConfig);
-    dashboardStore.setConfigPanel(false);
-  }
 </script>
-<style lang="scss" scoped>
-  .label {
-    font-size: 13px;
-    font-weight: 500;
-    display: block;
-    margin-bottom: 5px;
-  }
-
-  .item {
-    margin: 10px 0;
-  }
-
-  .footer {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    border-top: 1px solid $border-color-primary;
-    padding: 10px;
-    text-align: right;
-    width: 100%;
-    background-color: $theme-background;
-  }
-</style>