👌 review(layout): 拆分组件|优化部分逻辑

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
-  "vetur.validation.template": false,
-  "vetur.format.enable": false,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "vetur.experimental.templateInterpolationService": true
-}
+    "i18n-ally.localesPaths": [
+        "src/i18n"
+    ],
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+}

src/components/layout/drawer.vue

@@ -0,0 +1,153 @@
+<template>
+  <q-drawer v-model="leftDrawerOpen" show-if-above :width="250">
+    <q-card flat>
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar size="38px">
+            <img src="../../assets/l.png" />
+          </q-avatar>
+        </q-item-section>
+
+        <q-item-section>
+          <q-item-label>elecV2P</q-item-label>
+          <q-item-label caption>
+            <q-skeleton
+              type="text"
+              width="20%"
+              v-show="!$q.localStorage.getItem('version')"
+            />
+            <q-badge
+              class="flex flex-center"
+              v-show="!$q.localStorage.getItem('version')"
+              @click="upgrade"
+            >
+              {{ $q.localStorage.getItem('version') }}
+            </q-badge>
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-card>
+    <q-list padding>
+      <q-item
+        active-class="text-pink"
+        clickable
+        v-ripple
+        v-for="item in menu"
+        :key="item.title"
+        :to="item.link"
+        exact
+      >
+        <q-item-section avatar>
+          <q-icon :name="item.icon" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1">{{ item.title }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+    <q-toolbar class="fixed-bottom">
+      <q-btn
+        @click="$q.fullscreen.toggle()"
+        flat
+        round
+        dense
+        :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
+        class="q-mr-sm"
+      />
+      <q-space />
+      <q-btn
+        @click="dark"
+        flat
+        round
+        dense
+        :icon="
+          !$q.dark.isActive ? 'mdi-weather-night' : 'mdi-white-balance-sunny'
+        "
+        class="q-mr-sm"
+      />
+    </q-toolbar>
+  </q-drawer>
+</template>
+<script lang="ts" setup>
+import { useQuasar } from 'quasar';
+import { defineProps, watch, ref, defineEmits } from 'vue';
+
+const $q = useQuasar();
+const dark = () => {
+  $q.dark.toggle();
+  $q.localStorage.set('dark', $q.dark.isActive);
+};
+const leftDrawerOpen = ref(false);
+
+const prop = defineProps<{ modelValue: boolean }>();
+
+const emit = defineEmits(['update:modelValue', 'upgrade']);
+
+watch(
+  () => prop.modelValue,
+  () => {
+    leftDrawerOpen.value = prop.modelValue;
+  }
+);
+
+watch(leftDrawerOpen, (leftDrawerOpen) => {
+  emit('update:modelValue', leftDrawerOpen);
+});
+
+const upgrade = () => {
+  emit('upgrade');
+};
+
+const menu: { title: string; icon: string; link: string }[] = [
+  {
+    title: 'OVERVIEW',
+    icon: 'menu',
+    link: '/overview',
+  },
+  {
+    title: 'RULES',
+    icon: 'gavel',
+    link: '/rules',
+  },
+  {
+    title: 'REWRITE',
+    icon: 'restart_alt',
+    link: '/rewrite',
+  },
+  {
+    title: 'JSMANAGE',
+    icon: 'mdi-nodejs ',
+    link: '/jsmanage',
+  },
+  {
+    title: 'TASK',
+    icon: 'mdi-checkbox-multiple-marked-circle-outline',
+    link: '/task',
+  },
+  {
+    title: 'MITM',
+    icon: 'mdi-certificate',
+    link: '/mitm',
+  },
+  {
+    title: 'CFILTER',
+    icon: 'filter_alt_off',
+    link: '/cfilter',
+  },
+  {
+    title: 'SETTING',
+    icon: 'settings',
+    link: '/setting',
+  },
+  {
+    title: 'ABOUT',
+    icon: 'mdi-information',
+    link: '/about',
+  },
+  {
+    title: 'DONATION',
+    icon: 'volunteer_activism',
+    link: '/donation',
+  },
+];
+</script>

src/components/layout/hader.vue

@@ -0,0 +1,70 @@
+<template>
+  <q-header
+    elevated
+    :class="$q.dark.isActive ? 'q-dark' : 'bg-purple'"
+    v-touch-hold.mouse="handleMiniShell"
+    v-touch-swipe.mouse.right="handleMiniShell"
+  >
+    <q-toolbar>
+      <q-btn
+        flat
+        round
+        dense
+        icon="menu"
+        @click="toggleLeftDrawer(leftDrawerOpen)"
+        class="q-mr-sm"
+      />
+      <q-space></q-space>
+      <q-btn
+        type="a"
+        target="_blank"
+        flat
+        round
+        icon="mdi-github"
+        href="https://github.com/Teeoo/v2p-client"
+      >
+        <q-tooltip> 喜欢的话就贡献出你的小星星吧~ </q-tooltip>
+      </q-btn>
+    </q-toolbar>
+    <q-toolbar inset>
+      <q-toolbar-title>
+        <strong>{{ $route.meta.desc }}</strong>
+      </q-toolbar-title>
+    </q-toolbar>
+  </q-header>
+</template>
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { defineProps, watch, ref, defineEmits } from 'vue';
+
+const $q = useQuasar();
+
+const leftDrawerOpen = ref(false);
+
+const prop = defineProps<{ modelValue: boolean; miniShell: boolean }>();
+
+const emit = defineEmits([
+  'update:modelValue',
+  'update:miniShell',
+  'toggleLeftDrawer',
+]);
+
+watch(
+  () => prop.modelValue,
+  () => {
+    leftDrawerOpen.value = prop.modelValue;
+  }
+);
+
+watch(leftDrawerOpen, (leftDrawerOpen) => {
+  emit('update:modelValue', leftDrawerOpen);
+});
+
+const toggleLeftDrawer = (b: boolean) => {
+  emit('toggleLeftDrawer', !b);
+};
+
+const handleMiniShell = () => {
+  emit('update:miniShell', !prop.miniShell);
+};
+</script>

src/components/layout/message.vue

@@ -0,0 +1,93 @@
+<template>
+  <q-card-section>
+    <q-scroll-area style="height: 85vh" ref="scrollAreaRef">
+      <q-chat-message
+        v-for="(item, k) in message"
+        :key="k"
+        :sent="item.send"
+        :text="[item.text]"
+        :stamp="date.formatDate(item.time, 'YYYY-MM-DD HH:mm:ss')"
+      >
+        <template v-slot:avatar>
+          <q-avatar>
+            <q-icon :name="item.send ? 'mdi-account ' : 'mdi-powershell'" />
+          </q-avatar>
+        </template>
+      </q-chat-message>
+    </q-scroll-area>
+  </q-card-section>
+  <q-card-section class="fixed-bottom">
+    <q-input :prefix="cwd" v-model="text" @keydown.enter="listen($event)" />
+  </q-card-section>
+</template>
+<script lang="ts" setup>
+import { QScrollArea, date } from 'quasar';
+import { useInitStore } from '../../store/init';
+import { ref, inject, onMounted } from 'vue';
+
+const $store = useInitStore();
+const message = ref<
+  {
+    send?: boolean;
+    text?: string;
+    time?: Date;
+  }[]
+>([]);
+const scrollAreaRef = ref<Partial<QScrollArea>>({});
+const cwd = ref('shell');
+const ws = inject('ws') as WebSocket;
+const text = ref('');
+
+onMounted(() => {
+  console.log(111);
+});
+ws.send(JSON.stringify({ type: 'shell', data: 'cwd', id: $store.id }));
+ws.addEventListener('message', (e) => {
+  const result = JSON.parse(e.data) as {
+    type: string;
+    data:
+      | {
+          type: string;
+          data: string;
+        }
+      | string;
+  };
+  if (result.type === 'minishell') {
+    let text = result.data;
+    if (typeof text !== 'string' && text !== null) {
+      const { type, data } = result.data as {
+        data: string;
+        type: string;
+      };
+      type === 'cwd' ? (cwd.value = data) : '';
+      text = JSON.stringify(result.data);
+    }
+    if (text && text !== '\n') {
+      message.value.push({ send: false, text: text, time: new Date() });
+    }
+    if (scrollAreaRef.value.getScrollTarget) {
+      scrollAreaRef.value.setScrollPosition(
+        'vertical',
+        scrollAreaRef.value.getScrollTarget().scrollHeight,
+        300
+      );
+    }
+  }
+});
+
+const listen = (e: KeyboardEvent) => {
+  ws.send(JSON.stringify({ type: 'shell', data: text.value, id: $store.id }));
+  message.value.push({
+    send: true,
+    text: text.value,
+    time: new Date(),
+  });
+  text.value = '';
+  scrollAreaRef.value.setScrollPosition(
+    'vertical',
+    scrollAreaRef.value.getScrollTarget().scrollHeight,
+    300
+  );
+  e.preventDefault();
+};
+</script>