feat: status api & ui change

webui/src/api/program.ts

@@ -31,10 +31,11 @@ export const apiProgram = {
    * 状态
    */
   async status() {
-    const { data } = await axios.get<{ status: 'running' | 'stop' }>(
+    const { data } = await axios.get<{ status: boolean; version: string }>(
       'api/v1/status'
     );
-    return data.status === 'running';
+
+    return data!;
   },
 
   /**

webui/src/components/layout/ab-topbar.vue

@@ -9,14 +9,13 @@ import {
 } from '@icon-park/vue-next';
 
 const { t, changeLocale } = useMyI18n();
+const { running, onUpdate, offUpdate } = useAppInfo();
 
 const search = ref('');
 const show = ref(false);
 const showAdd = ref(false);
 
-const { onUpdate, offUpdate, start, pause, shutdown, restart, resetRule } =
-  useProgramStore();
-const { running } = storeToRefs(useProgramStore());
+const { start, pause, shutdown, restart, resetRule } = useProgramStore();
 
 const items = [
   {

webui/src/hooks/useAppInfo.ts

@@ -0,0 +1,35 @@
+export const useAppInfo = createSharedComposable(() => {
+  const { auth } = useAuth();
+  const running = ref<boolean>(false);
+  const version = ref<string>('');
+
+  function getStatus() {
+    const { execute, onResult } = useApi(apiProgram.status);
+
+    onResult((res) => {
+      running.value = res.status;
+      version.value = res.version;
+    });
+
+    if (auth.value !== '') {
+      execute();
+    }
+  }
+
+  const { pause: offUpdate, resume: onUpdate } = useIntervalFn(
+    getStatus,
+    3000,
+    {
+      immediate: false,
+      immediateCallback: true,
+    }
+  );
+
+  return {
+    running,
+    version,
+
+    onUpdate,
+    offUpdate,
+  };
+});

webui/src/pages/index/log.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 const { onUpdate, offUpdate, reset, copy } = useLogStore();
 const { log } = storeToRefs(useLogStore());
+const { version } = useAppInfo();
 
 onActivated(() => {
   onUpdate();
@@ -98,15 +99,10 @@ definePage({
 
             <div line></div>
 
-            <ab-button
-              mx-auto
-              text-16px
-              w-300px
-              h-46px
-              rounded-10px
-              link="mailto:estrellaxd05@gmail.com"
-              >Email Contact</ab-button
-            >
+            <div text-center text-primary text-h3>
+              <span>Version: </span>
+              <span>{{ version }}</span>
+            </div>
           </div>
         </ab-container>
       </div>

webui/src/store/program.ts

@@ -1,28 +1,4 @@
 export const useProgramStore = defineStore('program', () => {
-  const { auth } = useAuth();
-  const running = ref(false);
-
-  function getStatus() {
-    const { execute, onResult } = useApi(apiProgram.status);
-
-    onResult((res) => {
-      running.value = res;
-    });
-
-    if (auth.value !== '') {
-      execute();
-    }
-  }
-
-  const { pause: offUpdate, resume: onUpdate } = useIntervalFn(
-    getStatus,
-    3000,
-    {
-      immediate: false,
-      immediateCallback: true,
-    }
-  );
-
   function opts(handle: string) {
     return {
       failRule: (res: boolean) => !res,
@@ -43,11 +19,6 @@ export const useProgramStore = defineStore('program', () => {
   );
 
   return {
-    running,
-    getStatus,
-    onUpdate,
-    offUpdate,
-
     start,
     pause,
     shutdown,

webui/types/dts/auto-imports.d.ts

@@ -136,6 +136,7 @@ declare global {
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useApi: typeof import('../../src/hooks/useApi')['useApi']
+  const useAppInfo: typeof import('../../src/hooks/useAppInfo')['useAppInfo']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']