From f98177e3ae9b71ed9c82808aea73c0f1f37199a9 Mon Sep 17 00:00:00 2001
From: Teeoo <root@teeoo.cn>
Date: Tue, 14 Dec 2021 14:24:14 +0800
Subject: [PATCH] =?UTF-8?q?:ok=5Fhand:=20review(mitm):=20=E6=8B=86?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mitm/mitm.ts  |  18 ++
 src/components/mitm/mitm.vue | 108 ++++++++++++
 src/pages/mitm.vue           | 318 ++++++++++++++++++-----------------
 3 files changed, 294 insertions(+), 150 deletions(-)
 create mode 100644 src/components/mitm/mitm.ts
 create mode 100644 src/components/mitm/mitm.vue

diff --git a/src/components/mitm/mitm.ts b/src/components/mitm/mitm.ts
new file mode 100644
index 0000000..04c2bac
--- /dev/null
+++ b/src/components/mitm/mitm.ts
@@ -0,0 +1,18 @@
+export interface Mitm {
+    host: Host[];
+    enable: boolean;
+    crtinfo: Crtinfo;
+}
+
+export interface Host {
+    host: string;
+    enable: boolean;
+    note?: string;
+}
+
+export interface Crtinfo {
+    rescode: number;
+    commonName: string;
+    notBefore: string;
+    notAfter: string;
+}
diff --git a/src/components/mitm/mitm.vue b/src/components/mitm/mitm.vue
new file mode 100644
index 0000000..845d557
--- /dev/null
+++ b/src/components/mitm/mitm.vue
@@ -0,0 +1,108 @@
+<template>
+  <q-table
+    flat
+    separator="none"
+    :columns="header"
+    :rows="mitm.host"
+    v-model:pagination="page"
+    :filter="filter"
+  >
+    <template v-slot:top>
+      <q-space />
+      <q-input
+        placeholder="搜索"
+        v-model="filter"
+        borderless
+        dense
+        debounce="300"
+        color="primary"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props">
+        <q-td key="host" :props="props">
+          <q-input v-model="props.row.host" />
+        </q-td>
+        <q-td key="note" :props="props">
+          <q-input v-model="props.row.note" />
+        </q-td>
+        <q-td key="enable" :props="props">
+          <q-toggle v-model="props.row.enable" color="pink" />
+        </q-td>
+        <q-td key="action" :props="props">
+          <q-btn
+            @click="del(props.rowIndex)"
+            size="sm"
+            flat
+            color="pink"
+            label="删除"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+<script lang="ts" setup>
+import { QTableProps, useQuasar } from 'quasar';
+import { Mitm } from './mitm';
+import { ref, watch, watchEffect } from 'vue';
+
+const prop = defineProps<{
+  modelValue: Partial<Mitm>;
+  pagination: QTableProps['pagination'];
+}>();
+
+const emit = defineEmits(['update:modelValue', 'update:pagination']);
+
+const $q = useQuasar();
+const mitm = ref<Partial<Mitm>>({});
+const page = ref<QTableProps['pagination']>({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: $q.localStorage.getItem<number>('mitmPerPage') ?? 5,
+});
+
+const filter = ref('');
+
+watch(
+  () => prop.modelValue,
+  () => {
+    mitm.value = prop.modelValue;
+  }
+);
+
+watch(
+  () => prop.pagination,
+  () => {
+    page.value = prop.pagination;
+  }
+);
+
+watch(mitm, (mitm) => {
+  emit('update:modelValue', mitm);
+});
+
+watch(page, (page) => {
+  emit('update:pagination', page);
+});
+
+watchEffect(() =>
+  $q.localStorage.set('mitmPerPage', page.value?.rowsPerPage ?? 5)
+);
+
+const del = (idx: number) => {
+  mitm.value.host?.splice(idx, 1);
+};
+
+const header: QTableProps['columns'] = [
+  { name: 'host', align: 'center', label: '解析域名', field: 'host' },
+  { name: 'note', align: 'center', label: '备注', field: 'note' },
+  { name: 'enable', align: 'center', label: '启用', field: 'enable' },
+  { name: 'action', align: 'center', label: '操作', field: 'action' },
+];
+</script>
diff --git a/src/pages/mitm.vue b/src/pages/mitm.vue
index 59aa929..d0f22c1 100644
--- a/src/pages/mitm.vue
+++ b/src/pages/mitm.vue
@@ -1,180 +1,184 @@
 <template>
-  <q-page v-touch-hold.mouse='()=>handleSwipe=!handleSwipe'>
-    <q-table
-      flat
-      separator='none'
-      :columns='header'
-      :rows='mitm.host'
-      v-model:pagination='pagination'
+  <q-page v-touch-hold.mouse="() => (handleSwipe = !handleSwipe)">
+    <Mitm-Data v-model="mitm" v-model:pagination="pagination" />
+    <q-page-sticky
+      v-show="handleSwipe"
+      position="bottom-right"
+      :offset="[18, 18]"
     >
-      <template v-slot:body='props'>
-        <q-tr :props='props'>
-          <q-td key='host' :props='props'>
-            <q-input v-model='props.row.host' />
-          </q-td>
-          <q-td key='note' :props='props'>
-            <q-input v-model='props.row.note' />
-          </q-td>
-          <q-td key='enable' :props='props'>
-            <q-toggle
-              v-model='props.row.enable'
-              color='pink'
-            />
-          </q-td>
-          <q-td key='action' :props='props'>
-            <q-btn @click='del(props.pageIndex)' size='sm' flat color='pink' label='删除' />
-          </q-td>
-        </q-tr>
-      </template>
-    </q-table>
-    <q-page-sticky v-show='handleSwipe' position='bottom-right' :offset='[18, 18]'>
       <q-fab
-        v-model='draggingFab'
-        color='purple'
-        icon='keyboard_arrow_left'
-        direction='left'
+        v-model="draggingFab"
+        color="purple"
+        icon="keyboard_arrow_left"
+        direction="left"
       >
-        <q-fab-action @click='save' label-position='top' external-label color='purple' icon='save' label='保存' />
-        <q-fab-action @click='insert' label-position='top' external-label color='purple' icon='add' label='新增' />
-        <q-fab-action @click='dialog=true' label-position='top' external-label color='purple' icon='mdi-certificate'
-                      label='证书' />
+        <q-fab-action
+          @click="save"
+          label-position="top"
+          external-label
+          color="purple"
+          icon="save"
+          label="保存"
+        />
+        <q-fab-action
+          @click="insert"
+          label-position="top"
+          external-label
+          color="purple"
+          icon="add"
+          label="新增"
+        />
+        <q-fab-action
+          @click="dialog = true"
+          label-position="top"
+          external-label
+          color="purple"
+          icon="mdi-certificate"
+          label="证书"
+        />
       </q-fab>
     </q-page-sticky>
-    <q-dialog v-model='dialog' position='right'>
+    <q-dialog v-model="dialog" position="right">
       <q-card flat>
         <q-card-section horizontal>
           <q-card-section>
-            <div class='text-h6'>当前使用证书</div>
-            <div class='text-subtitle1'>{{ mitm.crtinfo?.commonName ?? '没有检测到相关证书(可能是 ANYPROXY 尚未开启)' }}</div>
-            <div class='text-h6'>有效日期</div>
-            <div class='text-subtitle1'>{{ mitm.crtinfo?.notBefore ?? '无' }} 至 {{ mitm.crtinfo?.notAfter ?? '无' }}</div>
+            <div class="text-h6">当前使用证书</div>
+            <div class="text-subtitle1">
+              {{
+                mitm.crtinfo?.commonName ??
+                '没有检测到相关证书(可能是 ANYPROXY 尚未开启)'
+              }}
+            </div>
+            <div class="text-h6">有效日期</div>
+            <div class="text-subtitle1">
+              {{ mitm.crtinfo?.notBefore ?? '无' }} 至
+              {{ mitm.crtinfo?.notAfter ?? '无' }}
+            </div>
           </q-card-section>
 
           <q-card-section>
-            <q-input label='证书名称' v-model='commonName' />
-            <q-toggle color='pink' label='强制覆盖' v-model='overwrite' />
+            <q-input label="证书名称" v-model="commonName" />
+            <q-toggle color="pink" label="强制覆盖" v-model="overwrite" />
+            <q-card-actions class="justify-around">
+              <q-btn flat round color="red" icon="download" @click="download">
+                <q-tooltip
+                  anchor="center left"
+                  self="center right"
+                  :offset="[10, 10]"
+                >
+                  下载当前使用的根证书 rootCA.crt
+                </q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                round
+                color="accent"
+                icon="mdi-newspaper-variant-multiple"
+                @click="generate"
+              >
+                <q-tooltip
+                  anchor="center left"
+                  self="center right"
+                  :offset="[10, 10]"
+                >
+                  生成新的根证书
+                </q-tooltip>
+              </q-btn>
+              <!--            <q-btn flat round color='primary' icon='upload' />-->
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="mdi-cached"
+                @click="caches"
+              >
+                <q-tooltip
+                  anchor="center left"
+                  self="center right"
+                  :offset="[10, 10]"
+                >
+                  清空 ANYPROXY temp cache 文件夹
+                </q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="mdi-delete"
+                @click="clear"
+              >
+                <q-tooltip
+                  anchor="center left"
+                  self="center right"
+                  :offset="[10, 10]"
+                >
+                  删除由根证书签发的其他域名证书
+                </q-tooltip>
+              </q-btn>
+            </q-card-actions>
           </q-card-section>
-
-          <q-card-actions vertical class='justify-around q-px-md'>
-            <q-btn flat round color='red' icon='download' @click='download'>
-              <q-tooltip anchor='center left' self='center right' :offset='[10, 10]'>
-                下载当前使用的根证书 rootCA.crt
-              </q-tooltip>
-            </q-btn>
-            <q-btn flat round color='accent' icon='mdi-newspaper-variant-multiple' @click='generate'>
-              <q-tooltip anchor='center left' self='center right' :offset='[10, 10]'>
-                生成新的根证书
-              </q-tooltip>
-            </q-btn>
-            <!--            <q-btn flat round color='primary' icon='upload' />-->
-            <q-btn flat round color='primary' icon='mdi-cached' @click='tempcaches'>
-              <q-tooltip anchor='center left' self='center right' :offset='[10, 10]'>
-                清空 ANYPROXY temp cache 文件夹
-              </q-tooltip>
-            </q-btn>
-            <q-btn flat round color='primary' icon='mdi-delete' @click='clear'>
-              <q-tooltip anchor='center left' self='center right' :offset='[10, 10]'>
-                删除由根证书签发的其他域名证书
-              </q-tooltip>
-            </q-btn>
-          </q-card-actions>
         </q-card-section>
       </q-card>
     </q-dialog>
   </q-page>
 </template>
-<script lang='ts'>
+<script lang="ts">
 import { defineComponent, onMounted, ref } from 'vue';
 import { api } from 'boot/axios';
 import { useQuasar } from 'quasar';
-
-export interface Mitm {
-  host: Host[];
-  enable: boolean;
-  crtinfo: Crtinfo;
-}
-
-export interface Host {
-  host: string;
-  enable: boolean;
-  note?: string;
-}
-
-export interface Crtinfo {
-  rescode: number;
-  commonName: string;
-  notBefore: string;
-  notAfter: string;
-}
-
-
-const columns = [
-  { name: 'host', align: 'center', label: '解析域名', field: 'host' },
-  { name: 'note', align: 'center', label: '备注', field: 'note' },
-  { name: 'enable', align: 'center', label: '启用', field: 'enable' },
-  { name: 'action', align: 'center', label: '操作', field: 'action' }
-];
+import { Mitm } from '../components/mitm/mitm';
+import MitmData from '../components/mitm/mitm.vue';
 
 export default defineComponent({
-  components: {},
+  components: { 'Mitm-Data': MitmData },
   setup() {
     const $q = useQuasar();
-    const header = ref(columns);
-    const pagination = ref({ sortBy: 'desc', descending: false, page: 1, rowsPerPage: 5 });
-    const mitm = ref<Partial<Mitm>>({});
+    const pagination = ref({
+      sortBy: 'desc',
+      descending: false,
+      page: 1,
+      rowsPerPage: $q.localStorage.getItem<number>('mitmPerPage') ?? 5,
+    });
+    const handleSwipe = ref(false);
     const draggingFab = ref(false);
     const dialog = ref(false);
-    const handleSwipe = ref(false);
+
     const commonName = ref('elecV2P');
     const overwrite = ref(false);
 
+    const mitm = ref<Partial<Mitm>>({});
+
     onMounted(async () => {
       try {
         mitm.value = await api.get('data?type=mitmhost');
         $q.notify({
           position: 'top',
           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          message: `成功获取 mitmhost 列表 ${mitm.value.host?.length}`
+          message: `成功获取 mitmhost 列表 ${mitm.value.host?.length}`,
         });
       } catch (e) {
         $q.notify({
           type: 'negative',
-          message: '处理中出了点幺蛾子'
+          message: '获取数据失败',
         });
       }
     });
 
-    const del = (idx: number) => {
-      mitm.value.host?.splice(idx, 1);
-    };
-
-    const insert = () => {
-      mitm.value.host?.push(
-        {
-          'host': '',
-          'note': '备注',
-          'enable': true
-        }
-      );
-      /* eslint-disable @typescript-eslint/no-non-null-assertion */
-      pagination.value.page = Math.ceil(mitm.value.host!.length / pagination.value.rowsPerPage);
-    };
-
     const save = async () => {
       try {
         const result: Record<'message', string> = await api.put('data', {
-          'mitmhostenable': false,
-          'type': 'mitmhost',
-          'data': mitm.value.host
+          mitmhostenable: false,
+          type: 'mitmhost',
+          data: mitm.value.host,
         });
         $q.notify({
           position: 'top',
-          message: result.message
+          message: result.message,
         });
       } catch (e) {
         $q.notify({
           type: 'negative',
-          message: '处理中出了点幺蛾子'
+          message: '保存数据失败',
         });
       }
     };
@@ -189,16 +193,17 @@ export default defineComponent({
         group: false,
         timeout: 0,
         spinner: true,
-        message: '证书生成中...'
+        message: '证书生成中...',
       });
       try {
-        const result: Record<'message' | 'rescode', string | number> = await api.put('crt', {
-          'op': 'new',
-          'data': {
-            'commonName': commonName.value,
-            'overwrite': overwrite.value
-          }
-        });
+        const result: Record<'message' | 'rescode', string | number> =
+          await api.put('crt', {
+            op: 'new',
+            data: {
+              commonName: commonName.value,
+              overwrite: overwrite.value,
+            },
+          });
         let msg: string;
         if (Number(result.rescode) !== -1) {
           msg = `成功生成新的根证书
@@ -211,64 +216,77 @@ export default defineComponent({
           icon: 'done',
           spinner: false,
           message: msg,
-          timeout: 2500
+          timeout: 2500,
         });
       } catch (e) {
         $q.notify({
           type: 'negative',
-          message: '处理中出了点幺蛾子'
+          message: '处理中出了点幺蛾子',
         });
       }
     };
 
-    const tempcaches = async () => {
+    const clear = async () => {
       try {
-        const result: Record<'message', string> = await api.delete('tempcaches');
+        const result: Record<'message', string> = await api.put('crt', {
+          op: 'clearcrt',
+        });
         $q.notify({
           position: 'top',
-          message: result.message
+          message: result.message,
         });
       } catch (e) {
         $q.notify({
           type: 'negative',
-          message: '处理中出了点幺蛾子'
+          message: '处理出错了',
         });
       }
     };
 
-    const clear = async () => {
+    const caches = async () => {
       try {
-        const result: Record<'message', string> = await api.put('crt', { 'op': 'clearcrt' });
+        const result: Record<'message', string> = await api.delete(
+          'tempcaches'
+        );
         $q.notify({
           position: 'top',
-          message: result.message
+          message: result.message,
         });
       } catch (e) {
         $q.notify({
           type: 'negative',
-          message: '处理中出了点幺蛾子'
+          message: '处理出错了',
         });
       }
     };
 
+    const insert = () => {
+      mitm.value.host?.push({
+        host: '',
+        note: '备注',
+        enable: true,
+      });
+      /* eslint-disable @typescript-eslint/no-non-null-assertion */
+      pagination.value.page = Math.ceil(
+        mitm.value.host!.length / pagination.value.rowsPerPage
+      );
+    };
+
     return {
-      header,
       pagination,
+      handleSwipe,
       mitm,
-      del,
-      save,
-      insert,
       draggingFab,
       dialog,
-      download,
       commonName,
       overwrite,
+      save,
+      download,
       generate,
-      tempcaches,
       clear,
-      handleSwipe
+      caches,
+      insert,
     };
-  }
+  },
 });
 </script>
-