@hostlink/nuxt-light 1.37.1 → 1.39.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.37.1",
+  "version": "1.39.0",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/module.mjs

@@ -136,6 +136,11 @@ const routes = [
     path: "/System/database/process",
     file: "runtime/pages/System/database/process.vue"
   },
+  {
+    name: "System-database-restore",
+    path: "/System/database/restore",
+    file: "runtime/pages/System/database/restore.vue"
+  },
   {
     name: "System-database-backup",
     path: "/System/database/backup",

package/dist/runtime/components/l-app-main.vue

@@ -55,6 +55,7 @@ let my = reactive(tt.my);
 const light = useLight();
 light.devMode = tt.system.devMode;
 light.init(my.styles);
+light.setMyRoles(my.roles);
 light.setPermissions(my.permissions);
 light.setMyFavorites(toRaw(my.myFavorites));
 const myFavorites = computed(() => {

package/dist/runtime/components/l-editor.vue

@@ -7,20 +7,20 @@ const textColorRef = ref(null);
 const textHightlightRef = ref(null);
 const highlight = ref("#ffff00aa");
 const foreColor = ref("#000000");
-const TextColorCMD = (cmd, name) => {
+const TextColorCMD = ((cmd, name) => {
   const edit = editorRef.value;
   textColorRef.value.hide();
   edit.caret.restore();
   edit.runCmd(cmd, name);
   edit.focus();
-};
-const TextHightlightCMD = (cmd, name) => {
+});
+const TextHightlightCMD = ((cmd, name) => {
   const edit = editorRef.value;
   textHightlightRef.value.hide();
   edit.caret.restore();
   edit.runCmd(cmd, name);
   edit.focus();
-};
+});
 const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
   fullscreen: { type: Boolean, required: false, skipCheck: true },

package/dist/runtime/components/l-input.vue

@@ -12,6 +12,7 @@ const props = defineProps({
   fillMask: { type: [Boolean, String], required: false, skipCheck: true },
   reverseFillMask: { type: Boolean, required: false, skipCheck: true },
   unmaskedValue: { type: Boolean, required: false, skipCheck: true },
+  maskTokens: { type: null, required: false },
   modelValue: { type: null, required: true },
   error: { type: [Boolean, null], required: false, skipCheck: true },
   errorMessage: { type: null, required: false },

package/dist/runtime/components/l-login.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, reactive, onMounted, resolveComponent } from "vue";
 import { useQuasar } from "quasar";
-import { api, useHead, m } from "#imports";
+import { api, useHead } from "#imports";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const emits = defineEmits(["login"]);

package/dist/runtime/composables/useLight.d.ts

@@ -1,4 +1,4 @@
-import type { QDialogOptions, QNotifyCreateOptions, QNotifyUpdateOptions } from 'quasar';
+import type { QDialogOptions, QNotifyCreateOptions } from 'quasar';
 declare module 'vue' {
     interface ComponentCustomProperties {
         $light: typeof light;
@@ -99,7 +99,7 @@ declare const light: {
             increment: (amount?: number) => void;
             setDefaults: (props: import("quasar").QLoadingBarOptions) => void;
         };
-        notify: (opts: QNotifyCreateOptions | string) => (props?: QNotifyUpdateOptions) => void;
+        notify: (opts: QNotifyCreateOptions | string) => (props?: import("quasar").QNotifyUpdateOptions) => void;
         platform: {
             userAgent: string;
             is: {
@@ -589,8 +589,9 @@ declare const light: {
     isAdmin: boolean;
     permissions: string[];
     myFavorites: any[];
+    myRoles: string[];
     $t: any;
-    notify: (opts: QNotifyCreateOptions | string) => (props?: QNotifyUpdateOptions) => void;
+    notify: (opts: QNotifyCreateOptions | string) => (props?: import("quasar").QNotifyUpdateOptions) => void;
     dialog: (opts: QDialogOptions) => import("quasar").DialogChainObject;
     users: {
         create: (user: User) => Promise<User>;
@@ -603,6 +604,7 @@ declare const light: {
     };
     getColorValue: () => string;
     setMyFavorites: (favorites: Array<any>) => void;
+    setMyRoles: (roles: Array<string>) => void;
     reloadMyFavorites: () => Promise<void>;
     getMyFavorites: () => any[];
     isDarkMode: () => boolean;
@@ -703,7 +705,7 @@ declare const _default: () => {
             increment: (amount?: number) => void;
             setDefaults: (props: import("quasar").QLoadingBarOptions) => void;
         };
-        notify: (opts: QNotifyCreateOptions | string) => (props?: QNotifyUpdateOptions) => void;
+        notify: (opts: QNotifyCreateOptions | string) => (props?: import("quasar").QNotifyUpdateOptions) => void;
         platform: {
             userAgent: string;
             is: {
@@ -1193,8 +1195,9 @@ declare const _default: () => {
     isAdmin: boolean;
     permissions: string[];
     myFavorites: any[];
+    myRoles: string[];
     $t: any;
-    notify: (opts: QNotifyCreateOptions | string) => (props?: QNotifyUpdateOptions) => void;
+    notify: (opts: QNotifyCreateOptions | string) => (props?: import("quasar").QNotifyUpdateOptions) => void;
     dialog: (opts: QDialogOptions) => import("quasar").DialogChainObject;
     users: {
         create: (user: User) => Promise<User>;
@@ -1207,6 +1210,7 @@ declare const _default: () => {
     };
     getColorValue: () => string;
     setMyFavorites: (favorites: Array<any>) => void;
+    setMyRoles: (roles: Array<string>) => void;
     reloadMyFavorites: () => Promise<void>;
     getMyFavorites: () => any[];
     isDarkMode: () => boolean;

package/dist/runtime/composables/useLight.js

@@ -74,6 +74,7 @@ const light = reactive({
   isAdmin: false,
   permissions: Array(),
   myFavorites: Array(),
+  myRoles: Array(),
   $t: null,
   notify: (opts) => {
     if (light.$q == null) {
@@ -158,6 +159,9 @@ const light = reactive({
   setMyFavorites: (favorites) => {
     light.myFavorites = favorites;
   },
+  setMyRoles: (roles) => {
+    light.myRoles = roles;
+  },
   reloadMyFavorites: async () => {
     const data = await q({
       my: {

package/dist/runtime/composables/useRoles.d.ts

@@ -0,0 +1,7 @@
+export default function useRoles(): {
+    roles: import("vue").ComputedRef<string[]>;
+    hasRole: (role: string) => boolean;
+    hasAny: (...args: any[]) => boolean;
+    hasAll: (wanted?: string[]) => boolean;
+    reload: () => Promise<string[]>;
+};

package/dist/runtime/composables/useRoles.js

@@ -0,0 +1,39 @@
+import { computed } from "vue";
+import useLight from "./useLight.js";
+import q from "./q.js";
+export default function useRoles() {
+  const light = useLight();
+  const roles = computed(() => light.myRoles || []);
+  function hasRole(role) {
+    if (!role) return false;
+    if (light.isAdmin) return true;
+    return light.myRoles.includes(role);
+  }
+  function hasAny(...args) {
+    const list = Array.isArray(args[0]) ? args[0] : args;
+    if (light.isAdmin) return true;
+    return list.some((r) => light.myRoles.includes(r));
+  }
+  function hasAll(wanted = []) {
+    if (light.isAdmin) return true;
+    return wanted.every((r) => light.myRoles.includes(r));
+  }
+  async function reload() {
+    const data = await q({
+      my: {
+        roles
+      }
+    });
+    const newRoles = (data?.my?.roles || []).map((r) => r.role || r);
+    light.myRoles = newRoles;
+    light.isAdmin = newRoles.includes("Administrators");
+    return newRoles;
+  }
+  return {
+    roles,
+    hasRole,
+    hasAny,
+    hasAll,
+    reload
+  };
+}

package/dist/runtime/composables/useWebAuthn.d.ts

@@ -0,0 +1,5 @@
+declare const _default: () => {
+    assertion: () => Promise<PublicKeyCredential>;
+    attestation: () => Promise<PublicKeyCredential>;
+};
+export default _default;

package/dist/runtime/composables/useWebAuthn.js

@@ -0,0 +1,5 @@
+import { useWebAuthn } from "@hostlink/light";
+import { default as api } from "./api.js";
+export default () => {
+  return useWebAuthn(api.axios);
+};

package/dist/runtime/pages/Permission/all.vue

@@ -2,78 +2,205 @@
 import { computed, ref } from "vue";
 import { m, api } from "#imports";
 import { useI18n } from "vue-i18n";
+import { useQuasar } from "quasar";
 const { t } = useI18n();
+const $q = useQuasar();
+const loading = ref(true);
+const updating = ref(/* @__PURE__ */ new Set());
 const fetchApp = async () => {
-  const { app: app2 } = await api.query({
-    app: {
-      permissions: true,
-      roles: {
-        name: true,
-        permissions: true
+  try {
+    loading.value = true;
+    const { app: app2 } = await api.query({
+      app: {
+        permissions: true,
+        roles: {
+          name: true,
+          permissions: true
+        }
       }
-    }
-  });
-  return app2;
+    });
+    return app2;
+  } catch (error) {
+    $q.notify({
+      type: "negative",
+      message: t("Failed to load permissions")
+    });
+    throw error;
+  } finally {
+    loading.value = false;
+  }
 };
 const app = ref(await fetchApp());
-const roles = computed(() => app.value.roles);
+const roles = computed(() => app.value?.roles || []);
 const columns = computed(() => [
-  { label: t("Permission"), field: "permission", align: "left" },
+  {
+    label: t("Permission"),
+    field: "permission",
+    align: "left",
+    style: "font-weight: bold; background-color: rgba(0,0,0,0.02);",
+    headerStyle: "font-weight: bold;"
+  },
   ...roles.value.map((role) => ({
     label: role.name,
     field: role.name,
-    align: "left"
+    align: "center",
+    headerStyle: "font-weight: bold;"
   }))
 ]);
-const rows = computed(
-  () => app.value.permissions.map((permission) => {
+const rows = computed(() => {
+  if (!app.value?.permissions) return [];
+  return app.value.permissions.map((permission) => {
     const row = { permission };
     roles.value.forEach((role) => {
       row[role.name] = role.permissions.includes(permission);
     });
     return row;
-  })
-);
+  });
+});
 const onUpdate = async (value, role, permission) => {
-  if (value) {
-    await m("addPermission", { value: permission, role });
-  } else {
-    await m("removePermission", { value: permission, role });
+  const updateKey = `${role}-${permission}`;
+  updating.value.add(updateKey);
+  try {
+    if (value) {
+      await m("addPermission", { value: permission, role });
+      $q.notify({
+        type: "positive",
+        message: t("Permission granted successfully")
+      });
+    } else {
+      await m("removePermission", { value: permission, role });
+      $q.notify({
+        type: "positive",
+        message: t("Permission removed successfully")
+      });
+    }
+    app.value = await fetchApp();
+  } catch (error) {
+    $q.notify({
+      type: "negative",
+      message: t("Failed to update permission")
+    });
+    app.value = await fetchApp();
+  } finally {
+    updating.value.delete(updateKey);
+  }
+};
+const toggleAllForRole = async (role, grant) => {
+  const updates = [];
+  for (const permission of app.value.permissions) {
+    const currentState = role.permissions.includes(permission);
+    if (currentState !== grant) {
+      updates.push({ permission, role: role.name, grant });
+    }
+  }
+  if (updates.length === 0) return;
+  try {
+    loading.value = true;
+    for (const update of updates) {
+      if (update.grant) {
+        await m("addPermission", { value: update.permission, role: update.role });
+      } else {
+        await m("removePermission", { value: update.permission, role: update.role });
+      }
+    }
+    app.value = await fetchApp();
+    $q.notify({
+      type: "positive",
+      message: t(grant ? "All permissions granted" : "All permissions removed")
+    });
+  } catch (error) {
+    $q.notify({
+      type: "negative",
+      message: t("Failed to update permissions")
+    });
+  } finally {
+    loading.value = false;
   }
-  app.value = await fetchApp();
 };
 const filter = ref("");
+const selectedRole = ref("");
 const filteredRows = computed(() => {
-  if (!filter.value) return rows.value;
-  return rows.value.filter(
-    (row) => row.permission.toLowerCase().includes(filter.value.toLowerCase())
-  );
+  let filtered = rows.value;
+  if (filter.value) {
+    filtered = filtered.filter(
+      (row) => row.permission.toLowerCase().includes(filter.value.toLowerCase())
+    );
+  }
+  if (selectedRole.value) {
+    filtered = filtered.filter((row) => row[selectedRole.value]);
+  }
+  return filtered;
 });
 </script>
 
 <template>
-    <l-page>
-        <q-table :columns="columns" flat bordered :rows="filteredRows" :pagination="{ rowsPerPage: 0 }" dense>
-            <template #top-left>
-                <q-input :color="$light.color" v-model="filter" :placeholder="t('Filter permissions')" dense clearable
-                    outlined>
-                    <template v-slot:append>
-                        <q-icon name="sym_o_search" />
-                    </template>
-                </q-input>
+  <l-page>
+
+    <!-- 載入指示器 -->
+    <div v-if="loading" class="text-center q-pa-md">
+      <q-spinner-dots size="50px" :color="$light.color" />
+      <div class="q-mt-sm">{{ $t('Loading permissions...') }}</div>
+    </div>
+
+    <!-- 主要內容 -->
+    <div v-else>
+      <!-- 篩選控制 -->
+      <div class="row q-gutter-md q-mb-md">
+        <div class="col-md-6 col-12">
+          <q-input :color="$light.color" v-model="filter" :placeholder="$t('Filter permissions')" dense clearable
+            outlined>
+            <template v-slot:append>
+              <q-icon name="sym_o_search" />
             </template>
-            <template #body="props">
-                <q-tr :props="props">
-                    <q-td>
-                        {{ props.row.permission }}
-                    </q-td>
-                    <q-td v-for="role in roles" :key="role.name">
-                        <q-checkbox v-model="props.row[role.name]"
-                            @update:model-value="onUpdate($event, role.name, props.row.permission)"
-                            :color="$light.color" />
-                    </q-td>
-                </q-tr>
-            </template>
-        </q-table>
-    </l-page>
+          </q-input>
+        </div>
+        <div class="col-md-6 col-12">
+          <q-select :color="$light.color" v-model="selectedRole"
+            :options="[{ label: $t('All Roles'), value: '' }, ...roles.map(r => ({ label: r.name, value: r.name }))]"
+            :placeholder="$t('Filter by role')" dense clearable outlined emit-value map-options />
+        </div>
+      </div>
+
+      <!-- 權限表格 -->
+      <q-table :columns="columns" flat bordered :rows="filteredRows" :pagination="{ rowsPerPage: 0 }" dense
+        class="permission-table">
+
+        <template #body="props">
+          <q-tr :props="props">
+            <q-td :style="columns[0].style" class="text-weight-medium">
+              <q-icon name="security" class="q-mr-sm text-grey-6" />
+              {{ props.row.permission }}
+            </q-td>
+            <q-td v-for="role in roles" :key="role.name" class="text-center">
+              <q-checkbox v-model="props.row[role.name]"
+                @update:model-value="onUpdate($event, role.name, props.row.permission)" :color="$light.color"
+                :loading="updating.has(`${role.name}-${props.row.permission}`)"
+                :disable="updating.has(`${role.name}-${props.row.permission}`)" />
+            </q-td>
+          </q-tr>
+        </template>
+
+        <template #no-data>
+          <div class="full-width text-center q-pa-lg">
+            <q-icon name="search_off" size="48px" class="text-grey-5" />
+            <div class="text-h6 text-grey-7 q-mt-md">
+              {{ $t('No permissions found') }}
+            </div>
+            <div class="text-body2 text-grey-6">
+              {{ $t('Try adjusting your search filters') }}
+            </div>
+          </div>
+        </template>
+      </q-table>
+
+      <!-- 結果統計 -->
+      <div class="q-mt-md text-caption text-grey-7">
+        {{ $t('Showing') }} {{ filteredRows.length }} {{ $t('of') }} {{ rows.length }} {{ $t('permissions') }}
+      </div>
+    </div>
+  </l-page>
 </template>
+
+<style scoped>
+.permission-table{box-shadow:0 2px 8px rgba(0,0,0,.1)}.permission-table :deep(.q-table__top){background-color:rgba(0,0,0,.02);padding:16px}.permission-table :deep(thead tr th){background-color:rgba(0,0,0,.05);font-weight:700}.permission-table :deep(tbody tr:hover){background-color:rgba(0,0,0,.03)}.permission-table :deep(tbody tr td:first-child){border-right:2px solid rgba(0,0,0,.1)}
+</style>

package/dist/runtime/pages/System/database/backup.vue

@@ -1,8 +1,28 @@
 <script setup>
 import { q } from "#imports";
 import { Loading, Notify } from "quasar";
+import { ref, onMounted } from "vue";
+const isDownloading = ref(false);
+const databaseInfo = ref(null);
+const fetchDatabaseInfo = async () => {
+  try {
+    const info = await q({
+      system: {
+        database: {
+          type: true,
+          sizeBytes: true,
+          version: true
+        }
+      }
+    });
+    databaseInfo.value = info.system.database;
+  } catch (e) {
+    console.error("Failed to fetch database info:", e);
+  }
+};
 const onClickDownload = async () => {
-  Loading.show({ message: "Exporting database..." });
+  isDownloading.value = true;
+  Loading.show({ message: "\u6B63\u5728\u532F\u51FA\u8CC7\u6599\u5EAB\uFF0C\u8ACB\u7A0D\u5019..." });
   try {
     const data = await q({
       system: {
@@ -11,23 +31,111 @@ const onClickDownload = async () => {
         }
       }
     });
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/:/g, "-");
+    const filename = `database-backup-${timestamp}.sql`;
     const blob = new Blob([data.system.database.export], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
-    a.download = "backup.sql";
+    a.download = filename;
     a.href = url;
     a.click();
     setTimeout(() => URL.revokeObjectURL(url), 1e3);
+    Notify.create({
+      type: "positive",
+      message: "\u8CC7\u6599\u5EAB\u5099\u4EFD\u5DF2\u6210\u529F\u4E0B\u8F09\uFF01",
+      position: "top"
+    });
   } catch (e) {
-    Notify.create({ type: "negative", message: "\u4E0B\u8F09\u5931\u6557\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66\u3002" });
+    Notify.create({
+      type: "negative",
+      message: "\u4E0B\u8F09\u5931\u6557\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66\u3002",
+      position: "top"
+    });
   } finally {
     Loading.hide();
+    isDownloading.value = false;
   }
 };
+onMounted(() => {
+  fetchDatabaseInfo();
+});
 </script>
 
 <template>
-    <l-page title="Database backup">
-        <l-btn label="Download" icon="sym_o_download" @click="onClickDownload"></l-btn>
+    <l-page title="資料庫備份">
+        <div class="backup-container">
+            <!-- 頁面說明 -->
+            <l-card class="info-card">
+                <div class="card-header">
+                    <h5 class="card-title">
+                        <q-icon name="sym_o_info" class="text-primary" />
+                        備份說明
+                    </h5>
+                </div>
+                <div class="card-content">
+                    <p class="description">
+                        資料庫備份功能可以將整個資料庫匯出為 SQL 檔案，包含所有資料表結構和資料。
+                        建議定期進行備份以確保資料安全。
+                    </p>
+                </div>
+            </l-card>
+
+            <!-- 備份資訊 -->
+            <l-card class="status-card">
+                <div class="card-header">
+                    <h5 class="card-title">
+                        <q-icon name="sym_o_database" class="text-secondary" />
+                        資料庫資訊
+                    </h5>
+                </div>
+                <div class="card-content">
+                    <div class="info-grid">
+                        <div class="info-item" v-if="databaseInfo">
+                            <q-icon name="sym_o_storage" class="info-icon" />
+                            <div class="info-content">
+                                <span class="info-label">資料庫類型</span>
+                                <span class="info-value">{{ databaseInfo.type || '未知' }}</span>
+                            </div>
+                        </div>
+                        <div class="info-item" v-if="databaseInfo">
+                            <q-icon name="sym_o_storage" class="info-icon" />
+                            <div class="info-content">
+                                <span class="info-label">資料庫大小</span>
+                                <span class="info-value">{{ databaseInfo.sizeBytes ? (databaseInfo.sizeBytes / 1024 /
+                                    1024).toFixed(2) + ' MB' : '計算中...' }}</span>
+                            </div>
+                        </div>
+                        <div class="info-item" v-if="databaseInfo && databaseInfo.version">
+                            <q-icon name="sym_o_info" class="info-icon" />
+                            <div class="info-content">
+                                <span class="info-label">資料庫版本</span>
+                                <span class="info-value">{{ databaseInfo.version }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </l-card>
+
+            <!-- 安全提醒 -->
+            <l-alert type="warning" class="security-alert">
+                <template #prefix>
+                    <q-icon name="sym_o_security" />
+                </template>
+                <strong>安全提醒：</strong>備份檔案包含敏感資料，請妥善保管並避免在不安全的環境中傳輸。
+            </l-alert>
+
+            <!-- 下載按鈕區域 -->
+            <div class="download-section">
+                <l-btn :label="isDownloading ? '正在備份中...' : '開始備份'" icon="sym_o_download" color="primary" size="lg"
+                    :loading="isDownloading" :disable="isDownloading" @click="onClickDownload" class="download-btn" />
+                <p class="download-hint">
+                    點擊按鈕將會下載包含完整資料庫內容的 SQL 檔案
+                </p>
+            </div>
+        </div>
     </l-page>
 </template>
+
+<style scoped>
+.backup-container{display:flex;flex-direction:column;gap:24px;margin:0 auto;max-width:800px;padding:20px}.info-card,.status-card{border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.card-header{padding:20px 24px 0}.card-title{align-items:center;color:#2c3e50;display:flex;font-weight:600;gap:8px;margin:0}.card-content{padding:16px 24px 24px}.description{color:#5a6c7d;line-height:1.6;margin:0}.info-grid{display:grid;gap:16px}.info-item{align-items:center;background:#f8f9fa;border-radius:8px;display:flex;gap:12px;padding:12px}.info-icon{color:#6c757d;font-size:24px}.info-content{display:flex;flex-direction:column;gap:4px}.info-label{color:#6c757d;font-size:14px;font-weight:500}.info-value{color:#2c3e50;font-size:16px;font-weight:600}.security-alert{border-radius:8px}.download-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #dee2e6;border-radius:16px;padding:32px 24px;text-align:center}.download-btn{border-radius:8px;box-shadow:0 4px 12px rgba(0,123,255,.3);font-size:16px;font-weight:600;height:48px;margin-bottom:12px;min-width:200px;transition:all .3s ease}.download-btn:hover{box-shadow:0 6px 20px rgba(0,123,255,.4);transform:translateY(-2px)}.download-hint{color:#6c757d;font-size:14px;margin:0 auto;max-width:400px}@media (max-width:768px){.backup-container{gap:20px;padding:16px}.card-content{padding:12px 20px 20px}.download-section{padding:24px 20px}.download-btn{min-width:100%}}
+</style>