Merge pull request #2 from chenweiyi/master

feat: support template search
feat: add auto refresh feature

packages/playground/app.vue

@@ -21,11 +21,15 @@
     >
       |
     </div>
-    <div class="flex-1 flex flex-col">
-      <div>
-        <button @click="start">
+    <div ref="chartRef" class="flex-1 flex flex-col">
+      <div class="flex mt-16px">
+        <button class="mr-8px" @click="start">
           analyze
         </button>
+        <span>
+          <input id="refreshBtn" v-model="autoRefresh" type="checkbox" />
+          <label for="refreshBtn">Auto Refresh</label>
+        </span>
       </div>
       <div class="h-full w-full relative">
         <div v-if="showSearchInput" class="absolute right-[10px] top-0 z-50">
@@ -121,11 +125,13 @@ import CodeMirror from './components/codemirror/CodeMirror.vue';
 import { defaultCode } from './default-code';
 
 const code = ref(defaultCode);
+const autoRefresh = ref(false);
 
 provide('autoresize', true);
 
 function codeChange(value: string) {
   code.value = value;
+  autoRefresh.value && start();
 }
 
 const networkRef = ref<HTMLElement>();
@@ -193,7 +199,11 @@ async function start() {
 
 const showSearchInput = ref(false);
 const searchInputRef = ref<HTMLInputElement>();
+
+const chartRef = ref<HTMLInputElement>();
+const { isOutside } = useMouseInElement(chartRef);
 onKeyStroke(['F', 'f', 'Command', 'Ctrl'], (e) => {
+  if (isOutside.value) return;
   e.preventDefault();
   showSearchInput.value = true;
   nextTick(() => {
@@ -244,4 +254,8 @@ html, body, #__nuxt {
   height: 100vh;
   overflow: hidden;
 }
+
+:root {
+  --bg: #fff;
+}
 </style>