complete window operation

eslint.config.js

@@ -73,6 +73,7 @@ export default [
       'prefer-promise-reject-errors': 'off',
       '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
       '@typescript-eslint/no-unused-expressions': 'off',
+      'vue/multi-word-component-names': 'off',
       // allow debugger during development only
       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     },

quasar.config.ts

@@ -98,7 +98,7 @@ export default defineConfig((ctx) => {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
       // https: true,
-      open: true, // opens browser window automatically
+      open: false, // opens browser window automatically
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
@@ -116,7 +116,7 @@ export default defineConfig((ctx) => {
       // directives: [],
 
       // Quasar plugins
-      plugins: [],
+      plugins: ['Dialog'],
     },
 
     // animations: 'all', // --- includes all animations

src-tauri/src/api/mod.rs

@@ -1,5 +1,5 @@
 use redis::{cmd};
-use tauri::{command, Result};
+use tauri::{command, Manager, Result, Runtime};
 use crate::api::resp::{IntoResponse};
 use crate::api::rdb::{ConnectionImpl, RedisClientImpl};
 use crate::api::resp::Response;
@@ -19,6 +19,12 @@ pub async fn request(path: &str, connection_info: rdb::ConnectionImpl, data: &st
     }
 }
 
+#[tauri::command]
+async fn command_name<R: Runtime>(app: tauri::AppHandle<R>, window: tauri::Window<R>) -> Result<()> {
+    let win = app.app_handle().get_webview_window("main").unwrap();
+
+  Ok(())
+}
 // check connection status
 async fn status(connection_info: ConnectionImpl) -> Result<Response<Option<String>>> {
     let r = connection_info.into_client()?.do_command::<Option<String>>(&cmd("ping")).await?;

src/components/EssentialLink.vue

@@ -1,35 +1,41 @@
 <template>
-  <q-item
-    clickable
-    tag="a"
-    target="_blank"
-    :href="link"
-  >
-    <q-item-section
-      v-if="icon"
-      avatar
-    >
+  <q-item clickable @click="jumpTo">
+    <q-item-section v-if="icon" avatar class="relative">
       <q-icon :name="icon" />
+      <q-badge floating color="red" v-if="badge" class="mr-5">new</q-badge>
     </q-item-section>
 
     <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
-      <q-item-label caption>{{ caption }}</q-item-label>
+      <q-item-label class="select-none">{{ title }}</q-item-label>
+      <q-item-label caption class="select-none">{{ caption }}</q-item-label>
     </q-item-section>
   </q-item>
 </template>
 
 <script setup lang="ts">
+import { open } from '@tauri-apps/plugin-shell'
+import { useRouter } from 'vue-router'
 export interface EssentialLinkProps {
-  title: string;
-  caption?: string;
-  link?: string;
-  icon?: string;
-};
+  title: string
+  caption?: string
+  link?: string
+  icon?: string
+  inner?: 1 | 2
+  badge?: boolean
+}
 
-withDefaults(defineProps<EssentialLinkProps>(), {
+const props = withDefaults(defineProps<EssentialLinkProps>(), {
   caption: '',
-  link: '#',
+  link: '/',
   icon: '',
-});
+  inner: 1,
+})
+const router = useRouter()
+const jumpTo = () => {
+  if (props.inner == 2) {
+    open(props.link)
+    return
+  }
+  router.push(props.link)
+}
 </script>

src/components/WindowOperationButtonGroup.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <q-btn
+      flat
+      round
+      dense
+      icon="remove"
+      class="q-mr-xs"
+      @click="handleOperation(Operation.mini)"
+    />
+    <q-btn
+      flat
+      round
+      dense
+      icon="fullscreen"
+      class="q-mr-xs"
+      @click="handleOperation(Operation.max)"
+    />
+    <q-btn flat round dense icon="close" @click="handleOperation(Operation.exit)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+import { getAllWindows, getCurrentWindow } from '@tauri-apps/api/window'
+enum Operation {
+  reset,
+  mini,
+  max,
+  exit,
+}
+const $q = useQuasar()
+const handleOperation = async (o: Operation) => {
+  switch (o) {
+    case Operation.exit:
+      $q.dialog({
+        transitionShow: 'rotate',
+        title: '提示',
+        message: '你确定要关闭应用吗？',
+        ok: {
+          push: true,
+          label: '确定',
+        },
+        cancel: {
+          push: true,
+          label: '取消',
+          color: 'negative',
+        },
+        persistent: true,
+      }).onOk(async () => (await getAllWindows()).forEach((element) => element.close()))
+      break
+    case Operation.max:
+      getCurrentWindow().toggleMaximize()
+      break
+    case Operation.mini:
+      getCurrentWindow().minimize()
+      break
+  }
+}
+</script>

src/components/models.ts

@@ -1,8 +0,0 @@
-export interface Todo {
-  id: number;
-  content: string;
-}
-
-export interface Meta {
-  totalCount: number;
-}

src/i18n/en-US/index.ts

@@ -1,7 +1,4 @@
 // This is just an example,
 // so you can safely delete all default props below
 
-export default {
-  failed: 'Action failed',
-  success: 'Action was successful'
-};
+export default {}

src/i18n/index.ts

@@ -1,5 +1,6 @@
-import enUS from './en-US';
-
+import enUS from './en-US'
+import zhCN from './zh-CN'
 export default {
-  'en-US': enUS
-};
+  'en-US': enUS,
+  'zh-CN': zhCN,
+}

src/i18n/zh-CN/index.ts

@@ -0,0 +1 @@
+export default {}

src/layouts/MainLayout.vue

@@ -1,22 +1,26 @@
 <template>
   <q-layout view="lHh Lpr lFf">
     <q-header elevated>
-      <q-toolbar>
-        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
-        <q-toolbar-title data-tauri-drag-region> BS </q-toolbar-title>
-        <div>v{{ $q.version }}</div>
+      <q-toolbar data-tauri-drag-region>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+          class="mr-5"
+        />
+        <q-btn flat dense round icon="home" to="/"></q-btn>
+        <q-space></q-space>
+        <WindowOperationButtonGroup></WindowOperationButtonGroup>
       </q-toolbar>
     </q-header>
 
     <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
       <q-list>
-        <q-item-label header> Operation </q-item-label>
-        <EssentialLink
-          @click="jumpTo(link.link)"
-          v-for="link in linksList"
-          :key="link.title"
-          v-bind="link"
-        />
+        <q-item-label header> BS <small>v2.0.0-dev</small> </q-item-label>
+        <EssentialLink v-for="link in linksList" :key="link.title" v-bind="link" />
       </q-list>
     </q-drawer>
 
@@ -28,35 +32,32 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import WindowOperationButtonGroup from 'src/components/WindowOperationButtonGroup.vue'
 import EssentialLink, { type EssentialLinkProps } from 'components/EssentialLink.vue'
-import { open } from '@tauri-apps/plugin-shell'
 const linksList: EssentialLinkProps[] = [
   {
     title: 'Host',
     caption: 'redis database host',
-    icon: 'school',
-    link: 'https://redis.io',
-  },
-  {
-    title: 'Github',
-    caption: 'github.com/fuyoo/bs',
-    icon: 'code',
-    link: 'https://github.com/fuyoo/bs-redis-desktop',
+    icon: 'storage',
+    link: '/',
   },
   {
     title: 'Settings',
     caption: 'app setting',
     icon: 'settings',
+    link: '/settings',
+    badge: true,
+  },
+  {
+    title: 'Github',
+    caption: 'github.com/fuyoo/bs',
+    icon: 'code',
+    link: 'https://github.com/fuyoo/bs-redis-desktop-client',
+    inner: 2,
   },
 ]
-
 const leftDrawerOpen = ref(false)
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value
 }
-const jumpTo = async (url?: string) => {
-  if (url) {
-    console.log
-  }
-}
 </script>

src/pages/ErrorNotFound.vue → src/pages/errors/NotFound.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+  <div
+    class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"
+    data-tauri-drag-region
+  >
     <div>
-      <div style="font-size: 30vh">
-        404
-      </div>
+      <div style="font-size: 30vh" data-tauri-drag-region class="cursor-default">404</div>
 
-      <div class="text-h2" style="opacity:.4">
+      <div class="text-h2 cursor-default" data-tauri-drag-region style="opacity: 0.4">
         Oops. Nothing here...
       </div>
 

src/pages/home/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <q-page class="row items-center justify-evenly">
+    <h1>wellcom to bs redis</h1>
+  </q-page>
+</template>
+
+<script setup lang="ts"></script>