刷新缓存

src/api/cache-flushed/cacheFlushed.ts

@@ -0,0 +1,24 @@
+import requestV2 from "@/utils/request-v2";
+
+export function getAllLabel() {
+  return requestV2({
+    url: "/cache/flushed/getAllLabel",
+    method: "GET",
+  });
+}
+
+export function getAllCacheByKey(key) {
+  return requestV2({
+    url: "/cache/flushed/getAllCacheByKey",
+    method: "GET",
+    params: { key },
+  });
+}
+
+export function delByKey(labelKey, key) {
+  return requestV2({
+    url: "/cache/flushed/delByKey",
+    method: "post",
+    data: { labelKey, key },
+  });
+}

src/components/cy/cy-monaco-editor/CyMonacoEditor.tsx

@@ -183,7 +183,7 @@ interface CodeProps {
 
 export function CyCodeEditorDialog(
   props: CodeProps,
-  dialogProps: DialogOptions = {
+  dialogProps: DialogOptions<any> = {
     dialogProps: {
       title: "代码编辑",
       width: "90%",
@@ -224,7 +224,7 @@ export function CyCodeEditorDialog(
 
 export function CyJsonEditorDialog<T extends object>(
   json: T | string,
-  dialogProps: DialogOptions = {
+  dialogProps: DialogOptions<any> = {
     dialogProps: {
       title: "json编辑",
       width: "60%",

src/layout/index.vue

@@ -41,7 +41,7 @@ const initSocket = () => {
 
 onMounted(() => {
   if (localStorage.token) {
-    initSocket();
+    // initSocket();
   }
 });
 </script>

src/views/data-base/page-editor-help-v2/components/page-editor-v2/JsonEditor.vue

@@ -1,56 +1,58 @@
 <template>
-  <el-dialog v-model="dialog" title="编辑JSON"
-             @closed="close"
-             width="95%"
-             top="2%">
-    <div ref="divRef" style="height: calc(100vh - 200px); width: 100%"/>
+  <el-dialog
+    v-model="dialog"
+    title="编辑JSON"
+    @closed="close"
+    width="95%"
+    top="2%"
+  >
+    <div ref="divRef" style="height: calc(100vh - 200px); width: 100%" />
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import {ref, nextTick, onMounted} from "vue";
+import { ref, nextTick, onMounted } from "vue";
 import sleep from "@/utils/sleep";
-import useCreateMonaco, {XcIStandaloneCodeEditor} from "@/utils/monaco-utlis/useCreateMonaco";
-import {ElButton, ElDialog} from "element-plus";
+import useCreateMonaco, {
+  XcIStandaloneCodeEditor,
+} from "@/utils/monaco-utlis/useCreateMonaco";
+import { ElDialog } from "element-plus";
 
 const props = defineProps<{
   data: {
-    json: string,
-    jsonType: string
-  }
-}>()
+    json: string;
+    jsonType: string;
+  };
+}>();
 
-const emits = defineEmits(['close'])
+const emits = defineEmits(["close"]);
 
-const dialog = ref(true)
-const divRef = ref(null)
+const dialog = ref(true);
+const divRef = ref(null);
 
-let monacoEditor: XcIStandaloneCodeEditor
+let monacoEditor: XcIStandaloneCodeEditor;
 
 async function establishEditor() {
-  await nextTick()
+  await nextTick();
   monacoEditor = useCreateMonaco(divRef.value, {
     value: JSON.stringify(props.data.json),
-    language: 'json',
-  })
-  await nextTick()
-  await sleep(200)
-  monacoEditor?.focus()
-  monacoEditor?.formatDocument()
+    language: "json",
+  });
+  await nextTick();
+  await sleep(200);
+  monacoEditor?.focus();
+  monacoEditor?.formatDocument();
 }
 
 function close() {
   const json = monacoEditor?.getValue();
-  monacoEditor?.dispose()
-  emits('close', json ? JSON.parse(json) : '')
+  monacoEditor?.dispose();
+  emits("close", json ? JSON.parse(json) : "");
 }
 
 onMounted(() => {
-  establishEditor()
-})
-
+  establishEditor();
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/settings/cache-flushed/index.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import * as api from "@/api/cache-flushed/cacheFlushed";
+import { CyJsonEditorDialog } from "@/components/cy/cy-monaco-editor/CyMonacoEditor";
+import { delByKey } from "@/api/cache-flushed/cacheFlushed";
+import { CyMessageBox } from "@/utils/cy-message-box";
+import XEUtils from "xe-utils";
+
+const store = reactive({
+  label: {},
+  currentLabelKey: "",
+  cacheAll: [],
+  search: "",
+});
+
+function allLabel() {
+  return api.getAllLabel().then(data => {
+    store.label = data;
+  });
+}
+
+function handleClickLabel(key) {
+  store.currentLabelKey = key;
+  api.getAllCacheByKey(key).then(data => {
+    store.cacheAll = data;
+  });
+}
+
+async function handleClickRefresh() {
+  await allLabel();
+  handleClickLabel(store.currentLabelKey);
+}
+
+function handleDetails(row) {
+  CyJsonEditorDialog(row.value);
+}
+
+async function handleDelByKey(row, index) {
+  await CyMessageBox.confirm({
+    type: "delete",
+    message: "是否删除",
+  });
+  delByKey(store.currentLabelKey, row.key);
+  store.cacheAll.splice(index, 1);
+}
+
+const tmpData = computed(() => {
+  if (store.search !== "") {
+    return XEUtils.filter(store.cacheAll, i => {
+      return (i.key as string).includes(store.search);
+    });
+  }
+  return store.cacheAll;
+});
+
+onMounted(() => {
+  allLabel();
+});
+</script>
+
+<template>
+  <div class="layout_container">
+    <header class="layout_card">
+      <el-input style="width: 220px" v-model="store.search" clearable />
+      <el-button @click="handleClickRefresh">刷新</el-button>
+    </header>
+
+    <div class="layout_main">
+      <div class="layout_container layout-horizontal">
+        <aside style="overflow: auto; width: 190px" class="layout_card">
+          <div
+            v-for="(value, key) in store.label"
+            :key="key"
+            class="cache-flushed__label"
+            :class="{ 'is-select': key === store.currentLabelKey }"
+            @click="handleClickLabel(key)"
+          >
+            {{ value }}
+          </div>
+        </aside>
+
+        <div class="layout_main">
+          <el-table
+            border
+            :data="tmpData"
+            max-height="100%"
+            :row-style="{ height: '80px' }"
+          >
+            <el-table-column prop="key" label="key" width="100" />
+            <el-table-column prop="value" label="value" show-overflow-tooltip>
+              <template #default="scope">
+                {{ JSON.stringify(scope.row.value) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="200">
+              <template #default="{ row, $index }">
+                <el-button @click="handleDetails(row)">详情</el-button>
+                <el-button @click="handleDelByKey(row, $index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.cache-flushed__label {
+  font-size: 18px;
+  padding: 10px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 10px;
+  margin: 5px 0;
+  cursor: pointer;
+  user-select: none;
+
+  &.is-select {
+    background-color: var(--el-color-primary);
+    color: #fff;
+  }
+}
+</style>