feat: 加入设置页面

Author: Zaitonn

src/components/BaseButton.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { RouterLink } from 'vue-router';
 import { getButtonColor } from '@/colors.js';
 import BaseIcon from '@/components/BaseIcon.vue';
+import { mdiLoading } from '@mdi/js';
 
 const props = defineProps({
   label: {
@@ -46,6 +47,7 @@ const props = defineProps({
   active: Boolean,
   disabled: Boolean,
   roundedFull: Boolean,
+  loading: Boolean,
 });
 
 const is = computed(() => {
@@ -116,9 +118,15 @@ const componentClass = computed(() => {
     :type="computedType"
     :to="to"
     :target="target"
-    :disabled="disabled"
+    :disabled="disabled || loading"
   >
-    <BaseIcon v-if="icon" :path="icon" :size="iconSize" />
+    <BaseIcon
+      v-if="loading"
+      class="animate-spin"
+      :path="mdiLoading"
+      :size="iconSize"
+    />
+    <BaseIcon v-else-if="icon" :path="icon" :size="iconSize" />
     <span v-if="label" :class="labelClass">{{ label }}</span>
   </component>
 </template>

src/components/Console.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ServerLineType } from '@/types/server';
 import { AnsiUp } from 'ansi_up';
 import { encode } from 'html-entities';
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
@@ -10,13 +9,17 @@ const props = defineProps({
     require: true,
     default: () => [],
   },
+  type: {
+    type: String,
+    default: '',
+  },
 });
 
 const scrollToBottom = () =>
   (consoleRef.value.scrollTop = consoleRef.value.scrollHeight ?? 0);
 
-const typed = computed(() => props.datas as { type: number; data: string }[]);
 const consoleRef = ref();
+const typed = computed(() => props.datas as { type: string; data: string }[]);
 const length = computed(() => props.datas.length);
 const ansiUp = new AnsiUp();
 ansiUp.use_classes = true;
@@ -33,29 +36,39 @@ onMounted(scrollToBottom);
       class="whitespace-pre-wrap break-all hover:bg-[#8881] px-3 transition-colors"
     >
       <span
-        v-if="line.type === ServerLineType.Output"
+        v-if="line.type === 'output' && type === 'server'"
         v-html="ansiUp.ansi_to_html(line.data)"
       >
       </span>
+
       <span
-        v-else-if="line.type === ServerLineType.Input"
+        v-else-if="line.type === 'input' && type === 'server'"
         class="opacity-70"
         title="输入"
       >
         >> {{ line.data }}
       </span>
-      <span v-else-if="line.type === ServerLineType.Info">
+
+      <span v-else-if="line.type === 'info'">
         <span class="text-sky-500"
           >[<span class="hover:underline hover:font-bold">Serein</span>]</span
         >
         {{ line.data }}
       </span>
-      <span v-else-if="line.type === ServerLineType.Error">
+
+      <span v-else-if="line.type === 'sent' || line.type === 'received'">
+        <span v-if="line.type === 'sent'" class="text-sky-500">[↑]</span>
+        <span v-else class="text-emerald-500">[↓]</span>
+        {{ line.data }}
+      </span>
+
+      <span v-else-if="line.type === 'error'">
         <span class="text-red-500"
           >[<span class="hover:underline font-bold">Error</span>]</span
         >
         {{ line.data }}
       </span>
+
       <span v-else v-html="encode(line.data)"></span>
     </div>
   </div>

src/components/FormControl.vue

@@ -154,6 +154,7 @@ defineExpose({ inputEl, selectEl, textareaEl });
       v-else-if="computedType === 'textarea'"
       :id="id"
       v-model="computedValue"
+      class="min-h-24"
       :class="inputElClass"
       :disabled="disabled"
       :name="name"

src/components/FormField.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { encode } from 'html-entities';
 import { computed, useSlots } from 'vue';
 
-defineProps({
+const props = defineProps({
   label: {
     type: String,
     default: null,
@@ -17,6 +18,9 @@ defineProps({
 });
 
 const slots = useSlots();
+const escaptedHelp = computed(() =>
+  encode(props.help)?.replace(/\n/g, '<br/>'),
+);
 
 const wrapperClass = computed(() => {
   const base = [];
@@ -47,7 +51,7 @@ const wrapperClass = computed(() => {
       <slot />
     </div>
     <div v-if="help" class="text-xs text-gray-500 dark:text-slate-400 mt-1">
-      {{ help }}
+      <span v-html="escaptedHelp" />
     </div>
   </div>
 </template>

src/components/SectionTitleLineWithButton.vue

@@ -24,7 +24,7 @@ const hasSlot = computed(() => useSlots().default);
 <template>
   <section
     :class="{ 'pt-6': !main }"
-    class="mb-6 flex items-center justify-between"
+    class="mb-6 flex items-center justify-between flex-wrap"
   >
     <div class="flex items-center justify-start">
       <IconRounded

src/menuAside.ts

@@ -56,23 +56,23 @@ export default [
     icon: mdiCogs,
     menu: [
       {
-        to: '/settings/connection',
+        to: 'settings.connection',
         label: '连接',
       },
       {
-        to: '/settings/reaction',
+        to: 'settings.reaction',
         label: '反应',
       },
       {
-        to: '/settings/webapi',
+        to: 'settings.webapi',
         label: '网页服务器',
       },
       {
-        to: '/settings/app',
+        to: 'settings.application',
         label: '应用',
       },
       {
-        to: '/settings/web',
+        to: 'settings.webconsole',
         label: '网页',
       },
     ],

src/router/index.ts

@@ -83,6 +83,46 @@ const routes: RouteRecordRaw[] = [
     name: 'about',
     component: () => import('@/views/AboutView.vue'),
   },
+  {
+    meta: {
+      title: '连接设置',
+    },
+    path: '/settings/connection',
+    name: 'settings.connection',
+    component: () => import('@/views/settings/ConnectionSettingView.vue'),
+  },
+  {
+    meta: {
+      title: '反应设置',
+    },
+    path: '/settings/reaction',
+    name: 'settings.reaction',
+    component: () => import('@/views/settings/ReactionSettingView.vue'),
+  },
+  {
+    meta: {
+      title: '网页服务器设置',
+    },
+    path: '/settings/webapi',
+    name: 'settings.webapi',
+    component: () => import('@/views/settings/WebApiSettingView.vue'),
+  },
+  {
+    meta: {
+      title: '应用设置',
+    },
+    path: '/settings/application',
+    name: 'settings.application',
+    component: () => import('@/views/settings/AppSettingView.vue'),
+  },
+  {
+    meta: {
+      title: '网页控制台设置',
+    },
+    path: '/settings/webconsole',
+    name: 'settings.webconsole',
+    component: () => import('@/views/settings/WebConsoleSettingView.vue'),
+  },
   {
     meta: {
       title: '登录',

src/services/apis/client.ts

@@ -7,12 +7,9 @@ import { useToast } from 'vue-toastification';
 const toast = useToast();
 const client = axios.create({ baseURL: '/api' });
 
-client.defaults.headers.post =
-  client.defaults.headers.put =
-  client.defaults.headers.delete =
-    {
-      'Content-Type': 'application/json',
-    };
+client.defaults.headers.post = client.defaults.headers.put = {
+  'Content-Type': 'application/json',
+};
 
 client.interceptors.request.use((value) => {
   const mainStore = useMainStore();

src/services/apis/server.ts

@@ -45,6 +45,8 @@ export async function inputServer(id: string, input: string) {
   await client.post<Packet<void>>(`/servers/${id}/input`, [input]);
 }
 export async function getServerHistory(id: string) {
-  const response = await client.get<Packet<Line[]>>(`/servers/${id}/history`);
+  const response = await client.get<Packet<{ type: string; data?: string }[]>>(
+    `/servers/${id}/history`,
+  );
   return response.data.data;
 }

src/services/apis/settings.ts

@@ -0,0 +1,26 @@
+import client from '@/services/apis/client';
+import { Packet } from '@/types/packet';
+import { Settings } from '@/types/settings';
+
+export async function getSettings() {
+  const response = await client.get<Packet<Settings>>('/settings');
+  return response.data.data;
+}
+
+export async function updateConnectionSetting(
+  setting: Settings['connection'],
+): Promise<void> {
+  await client.put<Packet<Settings>>('/settings/connection', setting);
+}
+
+export async function updateApplicationSetting(
+  setting: Settings['application'],
+): Promise<void> {
+  await client.put<Packet<Settings>>('/settings/application', setting);
+}
+
+export async function updateWebApiSetting(
+  setting: Settings['webApi'],
+): Promise<void> {
+  await client.put<Packet<Settings>>('/settings/web-api', setting);
+}