@hostlink/nuxt-light 1.65.0 → 1.66.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.65.0",
+  "version": "1.66.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -216,6 +216,11 @@ const routes = [
     path: "/User/profile",
     file: "runtime/pages/User/profile.vue"
   },
+  {
+    name: "User-createAccessToken",
+    path: "/User/createAccessToken",
+    file: "runtime/pages/User/createAccessToken.vue"
+  },
   {
     path: "/User/setting",
     file: "runtime/pages/User/setting.vue",

package/dist/runtime/components/L/CustomField/Add.vue

@@ -33,12 +33,17 @@ const onOKClick = async (value) => {
     });
     onDialogOK();
   } catch (e) {
+    $q.notify({
+      icon: "sym_o_warning",
+      message: e.message,
+      color: "negative"
+    });
   }
 };
 </script>
 
 <template>
-    <q-dialog ref="dialogRef" full-width>
+    <q-dialog ref="dialogRef">
         <q-card class="q-dialog-plugin">
             <q-toolbar>
                 <q-toolbar-title>Add Custom Field</q-toolbar-title>

package/dist/runtime/components/L/Database/create-table-dialog.vue

@@ -20,36 +20,44 @@ const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text"
 
 <template>
     <q-dialog ref="dialogRef" full-width>
-        <q-card class="q-dialog-plugin">
-            <q-toolbar>
-                <q-toolbar-title>Create Table</q-toolbar-title>
-                <q-space />
-                <q-btn dense flat icon="sym_o_close" v-close-popup />
-            </q-toolbar>
-            <form-kit type="l-form" :bordered="false" @submit="onOKClick" :value="{
-                name: '',
-                fields: [],
-            }" :action="false" #default="{ value }">
+        <Suspense>
+            <template #default>
+                <q-card class="q-dialog-plugin">
+                    <q-toolbar>
+                        <q-toolbar-title>Create Table</q-toolbar-title>
+                        <q-space />
+                        <q-btn dense flat icon="sym_o_close" v-close-popup />
+                    </q-toolbar>
+                    <form-kit type="l-form" :bordered="false" @submit="onOKClick" :value="{
+                        name: '',
+                        fields: [],
+                    }" :action="false" #default="{ value }">
 
-                <form-kit type="l-input" name="name" label="Name" validation="required" />
+                        <form-kit type="l-input" name="name" label="Name" validation="required" />
 
-                <form-kit type="l-repeater" name="fields">
-                    <div class="row q-gutter-sm">
-                        <form-kit type="l-input" name="name" label="Name" validation="required" class="col" />
+                        <form-kit type="l-repeater" name="fields">
+                            <div class="row q-gutter-sm">
+                                <form-kit type="l-input" name="name" label="Name" validation="required" class="col"
+                                    dense />
 
-                        <form-kit type="l-select" name="type" label="Type" :options="types" validation="required"
-                            class="col" />
-                        <form-kit type="l-input" name="length" label="Length" class="col" number />
-                        <form-kit type="l-input" name="default" label="Default" class="col" />
-                    </div>
+                                <form-kit type="l-select" name="type" label="Type" :options="types"
+                                    validation="required" class="col" dense />
+                                <form-kit type="l-input" name="length" label="Length" class="col" number dense />
+                                <form-kit type="l-input" name="default" label="Default" class="col" dense />
+                                <form-kit type="l-checkbox" name="nullable" label="Nullable" />
+                            </div>
+                        </form-kit>
 
-                    <div class="row">
-                        <form-kit type="l-checkbox" name="nullable" label="Nullable" />
-                    </div>
-                </form-kit>
+                    </form-kit>
 
-            </form-kit>
-
-        </q-card>
+                </q-card>
+            </template>
+            <template #fallback>
+                <div class="q-pa-lg flex flex-center">
+                    <q-spinner-dots color="primary" size="40px" />
+                    <div class="q-ml-sm">Loading...</div>
+                </div>
+            </template>
+        </Suspense>
     </q-dialog>
 </template>

package/dist/runtime/components/L/DocumentViewer.d.vue.ts

@@ -0,0 +1,50 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    width: string;
+    height: string;
+    mimeType: string;
+    fit: "fill" | "none" | "contain" | "cover" | "scale-down";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/L/DocumentViewer.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  mimeType: {
+    type: String,
+    default: ""
+  },
+  // 圖片/視頻的寬高
+  width: {
+    type: String,
+    default: "100%"
+  },
+  height: {
+    type: String,
+    default: "500px"
+  },
+  // 圖片的 fit 模式
+  fit: {
+    type: String,
+    default: "contain"
+  }
+});
+const textContent = ref("");
+const isLoading = ref(false);
+const error = ref(null);
+const fileType = computed(() => {
+  const mime = props.mimeType.toLowerCase();
+  if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("video/")) return "video";
+  if (mime.startsWith("audio/")) return "audio";
+  if (mime === "application/pdf") return "pdf";
+  if (mime.startsWith("text/") || mime === "application/json") return "text";
+  if (mime.includes("word") || mime.includes("spreadsheet") || mime.includes("presentation") || mime.includes("excel") || mime.includes("powerpoint") || mime.includes("msword") || mime.includes("officedocument")) {
+    return "office";
+  }
+  return "unknown";
+});
+const officeViewerUrl = computed(() => {
+  if (fileType.value === "office") {
+    return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(props.url)}`;
+  }
+  return "";
+});
+const loadTextContent = async () => {
+  if (fileType.value !== "text") return;
+  isLoading.value = true;
+  error.value = null;
+  try {
+    const response = await fetch(props.url);
+    if (!response.ok) throw new Error("\u7121\u6CD5\u8F09\u5165\u6587\u4EF6");
+    textContent.value = await response.text();
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "\u8F09\u5165\u5931\u6557";
+  } finally {
+    isLoading.value = false;
+  }
+};
+watch(() => [props.url, fileType.value], () => {
+  if (fileType.value === "text") {
+    loadTextContent();
+  }
+}, { immediate: true });
+</script>
+
+<template>
+    <div class="l-document-viewer">
+        <!-- 圖片預覽 -->
+        <q-img
+            v-if="fileType === 'image'"
+            :src="url"
+            :fit="fit"
+            :style="{ width, height }"
+            spinner-color="primary"
+        >
+            <template #error>
+                <div class="absolute-full flex flex-center bg-negative text-white">
+                    無法載入圖片
+                </div>
+            </template>
+        </q-img>
+
+        <!-- 視頻預覽 -->
+        <q-video
+            v-else-if="fileType === 'video'"
+            :src="url"
+            :style="{ width, height }"
+        />
+
+        <!-- 音頻預覽 -->
+        <audio
+            v-else-if="fileType === 'audio'"
+            :src="url"
+            controls
+            style="width: 100%"
+        >
+            您的瀏覽器不支援音頻播放
+        </audio>
+
+        <!-- PDF 預覽 -->
+        <iframe
+            v-else-if="fileType === 'pdf'"
+            :src="url"
+            :style="{ width, height, border: 'none' }"
+            title="PDF Viewer"
+        />
+
+        <!-- 文字預覽 (txt, json 等) -->
+        <div v-else-if="fileType === 'text'" class="text-viewer" :style="{ height }">
+            <q-spinner v-if="isLoading" color="primary" size="3em" />
+            <q-banner v-else-if="error" class="bg-negative text-white">
+                {{ error }}
+            </q-banner>
+            <pre v-else class="text-content">{{ textContent }}</pre>
+        </div>
+
+        <!-- Office 文件預覽 -->
+        <iframe
+            v-else-if="fileType === 'office'"
+            :src="officeViewerUrl"
+            :style="{ width, height, border: 'none' }"
+            title="Office Viewer"
+        />
+
+        <!-- 不支援的類型 -->
+        <div v-else class="unsupported flex flex-center" :style="{ height }">
+            <div class="text-center">
+                <q-icon name="sym_r_description" size="64px" color="grey-5" />
+                <div class="text-grey-7 q-mt-md">
+                    不支援預覽此文件類型
+                </div>
+                <div class="text-caption text-grey-5">
+                    {{ mimeType || "\u672A\u77E5\u985E\u578B" }}
+                </div>
+                <q-btn
+                    class="q-mt-md"
+                    color="primary"
+                    icon="sym_r_download"
+                    label="下載文件"
+                    :href="url"
+                    target="_blank"
+                    outline
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.l-document-viewer{width:100%}.text-viewer{background:#f5f5f5;border-radius:4px;overflow:auto;padding:16px}.text-content{margin:0;white-space:pre-wrap;word-wrap:break-word;font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.5}.unsupported{background:#fafafa;border:1px dashed #e0e0e0;border-radius:8px}
+</style>

package/dist/runtime/components/L/DocumentViewer.vue.d.ts

@@ -0,0 +1,50 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    width: string;
+    height: string;
+    mimeType: string;
+    fit: "fill" | "none" | "contain" | "cover" | "scale-down";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/L/DocumentViewerDialog.d.vue.ts

@@ -0,0 +1,65 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: string;
+    width: string;
+    height: string;
+    mimeType: string;
+    fit: "fill" | "none" | "contain" | "cover" | "scale-down";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/L/DocumentViewerDialog.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { useDialogPluginComponent } from "quasar";
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  mimeType: {
+    type: String,
+    default: ""
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  // 圖片/視頻的寬高
+  width: {
+    type: String,
+    default: "100%"
+  },
+  height: {
+    type: String,
+    default: "70vh"
+  },
+  // 圖片的 fit 模式
+  fit: {
+    type: String,
+    default: "contain"
+  }
+});
+defineEmits([
+  // REQUIRED; need to specify some events that your
+  // component will emit through useDialogPluginComponent()
+  ...useDialogPluginComponent.emits
+]);
+const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide" full-width >
+        <q-card class="q-dialog-plugin" :bordered="false" square>
+            <q-toolbar class="bg-primary text-white">
+                <q-toolbar-title>{{ title || "\u6587\u4EF6\u9810\u89BD" }}</q-toolbar-title>
+                <q-space />
+                <q-btn
+                    :href="url"
+                    target="_blank"
+                    dense
+                    flat
+                    icon="sym_o_download"
+                    title="下載"
+                />
+                <q-btn dense flat icon="sym_o_close" v-close-popup />
+            </q-toolbar>
+
+            <q-card-section class="q-pa-md">
+                <LDocumentViewer
+                    :url="url"
+                    :mime-type="mimeType"
+                    :width="width"
+                    :height="height"
+                    :fit="fit"
+                />
+            </q-card-section>
+        </q-card>
+    </q-dialog>
+</template>

package/dist/runtime/components/L/DocumentViewerDialog.vue.d.ts

@@ -0,0 +1,65 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        required: true;
+    };
+    mimeType: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    fit: {
+        type: () => "cover" | "contain" | "fill" | "none" | "scale-down";
+        default: string;
+    };
+}>> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: string;
+    width: string;
+    height: string;
+    mimeType: string;
+    fit: "fill" | "none" | "contain" | "cover" | "scale-down";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/l-customizer.d.vue.ts

@@ -32,7 +32,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     menuWidth: {
         type: import("vue").PropType<number>;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:theme": (...args: any[]) => void;
+    "update:menuOverlayHeader": (...args: any[]) => void;
+    "update:dense": (...args: any[]) => void;
+    "update:color": (...args: any[]) => void;
+    "update:miniState": (...args: any[]) => void;
+    "update:footer": (...args: any[]) => void;
+    "update:menuWidth": (value: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     time: {
         type: StringConstructor;
         default: string;
@@ -64,12 +72,20 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     menuWidth: {
         type: import("vue").PropType<number>;
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    "onUpdate:theme"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:menuOverlayHeader"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:dense"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:color"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:miniState"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:footer"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:menuWidth"?: ((value: number) => any) | undefined;
+}>, {
     color: string;
     theme: string;
     footer: boolean;
     time: string;
     dense: boolean;
-    miniState: boolean;
     menuOverlayHeader: boolean;
+    miniState: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/l-customizer.vue.d.ts

@@ -32,7 +32,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     menuWidth: {
         type: import("vue").PropType<number>;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:theme": (...args: any[]) => void;
+    "update:menuOverlayHeader": (...args: any[]) => void;
+    "update:dense": (...args: any[]) => void;
+    "update:color": (...args: any[]) => void;
+    "update:miniState": (...args: any[]) => void;
+    "update:footer": (...args: any[]) => void;
+    "update:menuWidth": (value: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     time: {
         type: StringConstructor;
         default: string;
@@ -64,12 +72,20 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     menuWidth: {
         type: import("vue").PropType<number>;
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    "onUpdate:theme"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:menuOverlayHeader"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:dense"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:color"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:miniState"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:footer"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:menuWidth"?: ((value: number) => any) | undefined;
+}>, {
     color: string;
     theme: string;
     footer: boolean;
     time: string;
     dense: boolean;
-    miniState: boolean;
     menuOverlayHeader: boolean;
+    miniState: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/l-file-manager-labels.d.vue.ts

@@ -1,6 +1,10 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 type __VLS_ModelProps = {
     modelValue?: string | undefined;
 };

package/dist/runtime/components/l-file-manager-labels.vue.d.ts

@@ -1,6 +1,10 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 type __VLS_ModelProps = {
     modelValue?: string | undefined;
 };

package/dist/runtime/components/l-file-manager-preview.vue

@@ -1,8 +1,7 @@
 <script setup>
 import { format, useQuasar, date } from "quasar";
 import { computed } from "vue";
-import { getApiClient, query } from "@hostlink/light";
-const api = getApiClient();
+import { query } from "@hostlink/light";
 const { humanStorageSize } = format;
 const quasar = useQuasar();
 const props = defineProps({
@@ -60,27 +59,29 @@ const isVideo = computed(() => {
 </script>
 
 <template>
-  <q-img :src="file.publicUrl" v-if="isImage"></q-img>
-  <q-video :src="file.publicUrl" v-else-if="isVideo"></q-video>
+  <div>
+    <q-img :src="file.publicUrl" v-if="isImage"></q-img>
+    <q-video :src="file.publicUrl" v-else-if="isVideo"></q-video>
 
-  <q-list dense>
-    <l-item label="Name">{{ file.name }}</l-item>
-    <l-item label="Size">{{ size }} ({{ file.size }})</l-item>
-    <l-item label="Location">{{ file.path }}</l-item>
-    <l-item label="Last modified">{{ lastModifiedHuman }}</l-item>
-    <l-item label="MIME type">{{ file.mimeType }}</l-item>
+    <q-list dense>
+      <l-item label="Name">{{ file.name }}</l-item>
+      <l-item label="Size">{{ size }} ({{ file.size }})</l-item>
+      <l-item label="Location">{{ file.path }}</l-item>
+      <l-item label="Last modified">{{ lastModifiedHuman }}</l-item>
+      <l-item label="MIME type">{{ file.mimeType }}</l-item>
 
-    <q-item>
-      <q-item-section side>
-        <q-item-label>URL</q-item-label>
-      </q-item-section>
-      <q-item-section style="align-items: flex-end;">
-        <q-item-label lines="1">{{ file.publicUrl }}</q-item-label>
-      </q-item-section>
+      <q-item>
+        <q-item-section side>
+          <q-item-label>URL</q-item-label>
+        </q-item-section>
+        <q-item-section style="align-items: flex-end;">
+          <q-item-label lines="1">{{ file.publicUrl }}</q-item-label>
+        </q-item-section>
 
-      <q-item-section side>
-        <q-btn size="md" flat dense round icon="sym_o_content_copy" @click="copyToClipboard(file.publicUrl)"></q-btn>
-      </q-item-section>
-    </q-item>
-  </q-list>
+        <q-item-section side>
+          <q-btn size="md" flat dense round icon="sym_o_content_copy" @click="copyToClipboard(file.publicUrl)"></q-btn>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </div>
 </template>

package/dist/runtime/components/l-file-manager.vue

@@ -2,7 +2,7 @@
 import { useI18n } from "vue-i18n";
 import { ref, watch, computed } from "vue";
 import { useQuasar, format, date } from "quasar";
-import { q, m, useLight, showUploadFilesDialog } from "#imports";
+import { q, m, useLight, showUploadFilesDialog, showDocumentDialog } from "#imports";
 import { getGrantedRights } from "@hostlink/light";
 import { fs } from "@hostlink/light";
 const { humanStorageSize } = format;
@@ -347,18 +347,10 @@ const getFilePublicUrl = async (location) => {
   return file.publicUrl;
 };
 const onPreview = async (node) => {
-  showPreviewImgDialog.value = true;
-  previewImg.value = await getFilePublicUrl(node.location);
-};
-const onPreviewPDF = async (node) => {
-  const height = window.innerHeight - 200;
-  $q.dialog({
-    autoClose: true,
-    fullWidth: true,
-    fullHeight: true,
-    title: "Preview PDF",
-    message: "<iframe src='" + await getFilePublicUrl(node.location) + "' width='100%' height='" + height + "px'></iframe>",
-    html: true
+  showDocumentDialog({
+    url: await getFilePublicUrl(node.location),
+    mimeType: node.mimeType,
+    title: node.name
   });
 };
 const onClickInfo = async (row) => {
@@ -376,7 +368,7 @@ const canPreview = (file) => {
   if (!file.mimeType) {
     return false;
   }
-  return file.mimeType.startsWith("image/");
+  return file.mimeType.startsWith("image/") || file.mimeType === "text/plain" || file.mimeType === "application/pdf" || file.mimeType.startsWith("video/") || file.mimeType.startsWith("audio/");
 };
 const onCheckTotalSize = async (folder) => {
   const d = $q.dialog({
@@ -562,8 +554,9 @@ const getFileIcon = (file) => {
         <q-toolbar>
           <l-file-manager-breadcrumbs v-model="selectedLocation" />
           <q-space></q-space>
-          <q-btn flat round icon="sym_o_drive_file_move" v-if="selected.length > 0">
-            <l-file-manager-move @selected="moveToFolder($event)" :current_location="selectedLocation"
+          <q-btn flat round icon="sym_o_drive_file_move" v-if="selected.length > 0 && selectedLocation">
+            <l-file-manager-move @selected="moveToFolder($event)"
+              :current_location="selectedLocation"
               :allow_cross_fs="selected.every(item => item.__typename == 'File')" />
             <q-tooltip>
               {{ $t('Move to') }}
@@ -624,7 +617,10 @@ const getFileIcon = (file) => {
                     </q-item-section>
                   </q-item>
 
-                  <q-img v-if="canPreview(props.row)" :src="props.row.url"></q-img>
+                  <l-document-viewer :url="props.row.publicUrl"
+                  height="100px"
+                  
+                    :mime-type="props.row.mimeType" :title="props.row.name" v-if="props.row.mimeType.startsWith('image/')"  />
 
                 </q-card>
               </div>
@@ -636,7 +632,7 @@ const getFileIcon = (file) => {
           <q-table flat :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
             :pagination="pagination" row-key="location" selection="multiple" v-model:selected="selected" dense
             :loading="loading" :loading-label="$t('Loading...')" :no-data-label="$t('No data available')"
-            separator="horizontal" :rows-per-page-options="[0]" color="primary">
+            separator="horizontal" :rows-per-page-options="[0]" color="primary" square>
             <template #body-cell-icon="props">
               <q-td auto-width>
                 <q-icon name="sym_o_folder" v-if="props.row.__typename == 'Folder'" size="sm" />
@@ -695,14 +691,6 @@ const getFileIcon = (file) => {
                         <q-item-section>{{ $t('Preview') }}</q-item-section>
                       </q-item>
 
-                      <q-item clickable v-close-popup v-if="props.row.mimeType == 'application/pdf'"
-                        @click="onPreviewPDF(props.row)">
-                        <q-item-section avatar>
-                          <q-icon name="sym_o_preview"></q-icon>
-                        </q-item-section>
-                        <q-item-section>{{ $t('Preview') }}</q-item-section>
-                      </q-item>
-
                       <q-item clickable v-close-popup @click="onClickInfo(props.row)" class="lt-lg">
                         <q-item-section avatar>
                           <q-icon name="sym_o_info"></q-icon>

package/dist/runtime/components/l-repeater.d.vue.ts

@@ -80,8 +80,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     bordered: boolean;
     separator: boolean;
     modelValue: unknown[];
-    max: number;
     min: number;
+    max: number;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

package/dist/runtime/components/l-repeater.vue.d.ts

@@ -80,8 +80,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     bordered: boolean;
     separator: boolean;
     modelValue: unknown[];
-    max: number;
     min: number;
+    max: number;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

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

@@ -0,0 +1,9 @@
+export interface DocumentDialogOptions {
+    url: string;
+    mimeType?: string;
+    title?: string;
+    width?: string;
+    height?: string;
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+}
+export declare function showDocumentDialog(options: DocumentDialogOptions): import("quasar").DialogChainObject;

package/dist/runtime/composables/showDocumentDialog.js

@@ -0,0 +1,15 @@
+import { Dialog } from "quasar";
+import { LDocumentViewerDialog } from "#components";
+export function showDocumentDialog(options) {
+  return Dialog.create({
+    component: LDocumentViewerDialog,
+    componentProps: {
+      url: options.url,
+      mimeType: options.mimeType ?? "",
+      title: options.title ?? "",
+      width: options.width ?? "100%",
+      height: options.height ?? "70vh",
+      fit: options.fit ?? "contain"
+    }
+  });
+}

package/dist/runtime/pages/CustomField/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { model, q } from "#imports";
-import { resolveComponent } from "vue";
+import { LCustomFieldAdd } from "#components";
 const onRequest = async (request) => {
   request.loadObjects("CustomField");
 };
@@ -15,7 +15,6 @@ const columns = model("CustomField").columns({
   type: true,
   validation: true
 });
-const addComponent = await resolveComponent("l-custom-field-add");
 </script>
 
 <template>
@@ -25,9 +24,10 @@ const addComponent = await resolveComponent("l-custom-field-add");
             on Customization settings page.
         </p>
 
-        <l-table row-key="custom_field_id" @request-data="onRequest" :columns="columns" :add-component="addComponent" :add-component-props="{
-            models: app.customFieldModels
-        }" :actions="['edit', 'delete']">
+        <l-table row-key="custom_field_id" @request-data="onRequest" :columns="columns" :add-component="LCustomFieldAdd"
+            :add-component-props="{
+                models: app.customFieldModels
+            }" :actions="['edit', 'delete']">
         </l-table>
 
     </l-page>

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

@@ -1,6 +1,9 @@
 <script setup>
-import { q, m, useLight, useAsyncData } from "#imports";
-import { resolveComponent, ref, reactive, computed } from "vue";
+import { q, m, useLight, useAsyncData, useQuasar } from "#imports";
+import { ref, reactive, computed } from "vue";
+import { LDatabaseCreateTableDialog, LDialogDatabaseFieldAdd } from "#components";
+import { Dialog } from "quasar";
+const $q = useQuasar();
 const light = useLight();
 const { data, refresh } = await useAsyncData("database", async () => {
   return await q({
@@ -14,18 +17,16 @@ const { data, refresh } = await useAsyncData("database", async () => {
     }
   }).then((res) => res.system.database);
 });
-const SYSTEM_TABLES = ["Config", "EventLog", "MailLog", "Permission", "Role", "SystemValue", "Translate", "User", "UserLog", "UserRole", "MyFavorite", "CustomField"];
+const SYSTEM_TABLES = ["Config", "EventLog", "MailLog", "Permission", "Role", "SystemValue", "Translate", "User", "UserLog", "UserRole", "MyFavorite", "CustomField", "Revision"];
 const custom_tables = computed(() => {
   return (data.value?.tableStatus ?? []).filter((table) => !SYSTEM_TABLES.includes(table.Name));
 });
 const systables = computed(() => {
   return (data.value?.tableStatus ?? []).filter((table) => SYSTEM_TABLES.includes(table.Name));
 });
-const field_add = resolveComponent("l-dialog-database-field-add");
-const table_add = resolveComponent("l-database-create-table-dialog");
 const add = async (table) => {
-  light.dialog({
-    component: field_add
+  $q.dialog({
+    component: LDialogDatabaseFieldAdd
   }).onOk(async (data2) => {
     try {
       await m("lightDatabaseAddField", {
@@ -83,8 +84,8 @@ const removeField = async (table) => {
   });
 };
 const createTable = () => {
-  light.dialog({
-    component: table_add
+  Dialog.create({
+    component: LDatabaseCreateTableDialog
   }).onOk(async (data2) => {
     try {
       await m("lightDatabaseCreateTable", {
@@ -175,62 +176,48 @@ const truncatTable = async () => {
             </l-list>
         </l-card>
 
-        <q-card>
-            <q-list separator bordered>
-                <q-expansion-item label="Table Status" dense>
-                    <div s>
-
-                        <q-table :rows="custom_tables" hide-pagination flat bordered separator="cell" dense
-                            :rows-per-page-options="[0]" v-model:selected="selectedTable" selection="multiple"
-                            row-key="Name">
-
-                            <template #top-left>
-                                <q-btn icon="sym_o_add" @click="createTable()" round flat size="sm">
-                                    <q-tooltip>Create table</q-tooltip>
-                                </q-btn>
-                                <q-btn icon="sym_o_delete" @click="removeTable()" round flat size="sm"
-                                    :disable="selectedTable.length == 0">
-                                    <q-tooltip>Remove table</q-tooltip>
-                                </q-btn>
-
-                                <q-btn icon="sym_o_scan_delete" @click="truncatTable" round flat size="sm"
-                                    :disable="selectedTable.length == 0">
-                                    <q-tooltip>Truncate table</q-tooltip>
-                                </q-btn>
-
-                            </template>
-                        </q-table>
-
-                        <q-table :rows="systables" hide-pagination flat bordered separator="cell" dense
-                            :rows-per-page-options="[0]" row-key="Name" title="System tables">
+        <l-card>
+            <q-expansion-item label="Custom Tables" dense header-class="text-weight-medium">
+                <q-table :rows="custom_tables" hide-pagination flat separator="cell" dense :rows-per-page-options="[0]"
+                    v-model:selected="selectedTable" selection="multiple" row-key="Name" class="q-ma-sm">
+                    <template #top>
+                        <div class="row items-center q-gutter-sm">
+                            <q-btn icon="sym_o_add" @click="createTable" flat size="sm" label="Add Table"
+                                color="primary" />
+                            <q-btn icon="sym_o_delete" @click="removeTable" :disable="selectedTable.length == 0"
+                                label="Remove" flat size="sm" color="negative" />
+                            <q-btn icon="sym_o_scan_delete" @click="truncatTable" :disable="selectedTable.length == 0"
+                                label="Truncate" flat size="sm" color="warning" />
+                        </div>
+                    </template>
+                </q-table>
+            </q-expansion-item>
 
-                        </q-table>
-                    </div>
-                </q-expansion-item>
-            </q-list>
-        </q-card>
+            <q-separator />
 
-        <q-card>
-            <q-list separator bordered>
-                <q-expansion-item :label="table.name" v-for="table in data.table" dense>
-                    <div class="q-ma-sm">
-                        <q-table row-key="name" :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat
-                            bordered selection="multiple" v-model:selected="selected[table.name]">
-                            <template #top-left>
-                                <q-btn icon="sym_o_add" @click="add(table.name)" round flat size="sm">
-                                    <q-tooltip>Add field</q-tooltip>
-                                </q-btn>
-                                <q-btn icon="sym_o_delete" @click="removeField(table.name)" round flat size="sm"
-                                    :disable="selected[table.name].length == 0">
-                                    <q-tooltip>Remove field</q-tooltip>
-                                </q-btn>
-                            </template>
-                        </q-table>
-                    </div>
+            <q-expansion-item label="System Tables" dense header-class="text-weight-medium">
+                <q-table :rows="systables" hide-pagination flat separator="cell" dense :rows-per-page-options="[0]"
+                    row-key="Name" class="q-ma-sm" />
+            </q-expansion-item>
+        </l-card>
 
-                </q-expansion-item>
-            </q-list>
-        </q-card>
+        <l-card title="Tables">
+            <q-expansion-item v-for="table in data.table" :key="table.name" :label="table.name" dense
+                header-class="text-weight-medium">
+                <q-table row-key="name" :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat
+                    separator="cell" dense selection="multiple" v-model:selected="selected[table.name]" class="q-ma-sm">
+                    <template #top>
+                        <div class="row items-center q-gutter-sm">
+                            <q-btn icon="sym_o_add" @click="add(table.name)" flat size="sm" label="Add Field"
+                                color="primary" />
+                            <q-btn icon="sym_o_delete" @click="removeField(table.name)"
+                                :disable="selected[table.name]?.length == 0" label="Remove Field" flat size="sm"
+                                color="negative" />
+                        </div>
+                    </template>
+                </q-table>
+            </q-expansion-item>
+        </l-card>
 
     </l-page>
 </template>

package/dist/runtime/pages/System/setting.vue

@@ -47,7 +47,7 @@ const onSubmit = async (d) => {
                     <q-tabs v-model="tab" vertical>
                         <q-tab name="general" icon="sym_o_info" :label="$t('General')" />
                         <q-tab name="security" icon="sym_o_security" :label="$t('Security')" />
-                        <q-tab name="Modules" icon="sym_o_apps" :label="$t('Modules')" />
+                        <q-tab name="modules" icon="sym_o_apps" :label="$t('Modules')" />
                         <q-tab name="mail" icon="sym_o_email" :label="$t('Mail')" />
                         <q-tab name="forget-password" icon="sym_o_lock" :label="$t('Forget password')" />
                         <q-tab name="authentication" icon="sym_o_passkey" :label="$t('Authentication')" />
@@ -58,7 +58,7 @@ const onSubmit = async (d) => {
                     <l-system-setting-general v-if="tab == 'general'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-mail v-if="tab == 'mail'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-security v-if="tab == 'security'" v-bind="obj" @submit="onSubmit" />
-                    <l-system-setting-modules v-if="tab == 'Modules'" v-bind="obj" @submit="onSubmit" />
+                    <l-system-setting-modules v-if="tab == 'modules'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-developer v-if="tab == 'developer'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-forget-password v-if="tab == 'forget-password'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-authentication v-if="tab == 'authentication'" v-bind="obj" @submit="onSubmit" />

package/dist/runtime/pages/User/createAccessToken.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/pages/User/createAccessToken.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref } from "vue";
+import { useLight } from "#imports";
+import m from "../../composables/m";
+const light = useLight();
+const token = ref(null);
+const expiresOptions = [
+  { label: "7 \u65E5", value: 7 * 24 * 60 * 60 },
+  { label: "30 \u65E5", value: 30 * 24 * 60 * 60 },
+  { label: "3 \u500B\u6708", value: 90 * 24 * 60 * 60 }
+];
+const onSubmit = async (data) => {
+  token.value = null;
+  try {
+    const result = await m("createAccessToken", {
+      name: data.name,
+      expired_time: data.expired_time
+    });
+    token.value = result;
+  } catch (e) {
+    light.notify({ type: "negative", message: "\u5EFA\u7ACB\u5931\u6557" });
+  }
+};
+const copyToken = () => {
+  if (!token.value) return;
+  navigator.clipboard.writeText(token.value);
+  light.notify({ type: "positive", message: "\u5DF2\u8907\u88FD\u5230\u526A\u8CBC\u7C3F" });
+};
+const reset = () => {
+  token.value = null;
+};
+</script>
+
+<template>
+    <l-page title="Create Access Token" :back-btn="true">
+        <div style="max-width: 560px;">
+            <form-kit type="l-form" :disabled="!!token" @submit="onSubmit">
+                <form-kit type="l-input" name="name" label="Token Name" validation="required" />
+                <form-kit type="l-select" name="expired_time" label="Expiration" :options="expiresOptions"
+                    validation="required" />
+            </form-kit>
+        </div>
+
+        <!-- Token result -->
+        <q-card v-if="token" flat bordered class="q-pa-md q-mt-md" style="max-width: 560px;">
+            <q-card-section>
+                <div class="text-subtitle1 q-mb-sm text-positive">Token Created</div>
+                <div class="text-caption text-grey q-mb-sm">Please copy and save this token immediately. It will only be
+                    shown once.</div>
+                <q-input :model-value="token" v-bind="light.styles.input" readonly type="textarea" autogrow>
+                    <template #append>
+                        <q-btn flat round icon="content_copy" @click="copyToken">
+                            <q-tooltip>複製</q-tooltip>
+                        </q-btn>
+                    </template>
+                </q-input>
+            </q-card-section>
+            <q-card-actions>
+                <q-btn flat label="建立另一個" @click="reset" />
+            </q-card-actions>
+        </q-card>
+    </l-page>
+</template>

package/dist/runtime/pages/User/createAccessToken.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/pages/User/profile.vue

@@ -53,6 +53,7 @@ eventLogCols.forEach((col) => {
         <template #header>
             <l-btn icon="sym_o_password" to="setting/password" label="Update password" />
             <l-btn icon="sym_o_key" to="setting/two-factor-auth" label="Two factor auth" />
+            <l-btn icon="sym_o_token" to="createAccessToken" label="Create access token" />
         </template>
 
         <l-row>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.65.0",
+  "version": "1.66.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -51,14 +51,14 @@
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^1.10.0",
-    "@nuxt/kit": "^4.2.2",
-    "@nuxt/schema": "^4.2.2",
+    "@nuxt/kit": "^4.3.0",
+    "@nuxt/schema": "^4.3.0",
     "@nuxt/test-utils": "^3.17.2",
     "@types/google.accounts": "^0.0.18",
     "@types/node": "^24.10.1",
     "changelogen": "^0.6.2",
     "eslint": "^9.39.1",
-    "nuxt": "^4.2.2",
+    "nuxt": "^4.3.0",
     "typescript": "^5.9.2",
     "vue-tsc": "^3.1.5"
   }