@hostlink/nuxt-light 1.50.0 → 1.51.0

package/dist/module.json

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

package/dist/module.mjs

@@ -131,6 +131,11 @@ const routes = [
     path: "/SystemValue/add",
     file: "runtime/pages/SystemValue/add.vue"
   },
+  {
+    name: "System-database-check",
+    path: "/System/database/check",
+    file: "runtime/pages/System/database/check.vue"
+  },
   {
     name: "System-database-process",
     path: "/System/database/process",
@@ -226,9 +231,14 @@ const routes = [
         file: "runtime/pages/User/setting/information.vue"
       },
       {
-        name: "User-setting-my_favorite",
-        path: "my_favorite",
-        file: "runtime/pages/User/setting/my_favorite.vue"
+        name: "User-setting-favorite",
+        path: "favorite",
+        file: "runtime/pages/User/setting/favorite.vue"
+      },
+      {
+        name: "User-setting-menu",
+        path: "menu",
+        file: "runtime/pages/User/setting/menu.vue"
       },
       {
         name: "User-setting-open_id",

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

@@ -1,12 +1,12 @@
-declare var __VLS_30: {}, __VLS_180: {}, __VLS_267: {}, __VLS_273: {};
+declare var __VLS_30: {}, __VLS_180: {}, __VLS_271: {}, __VLS_277: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_30) => any;
 } & {
     'user-menu'?: (props: typeof __VLS_180) => any;
 } & {
-    'page-top'?: (props: typeof __VLS_267) => any;
+    'page-top'?: (props: typeof __VLS_271) => any;
 } & {
-    'page-bottom'?: (props: typeof __VLS_273) => any;
+    'page-bottom'?: (props: typeof __VLS_277) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: (...args: any[]) => void;

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

@@ -3,7 +3,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useLight, q, m } from "#imports";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
-import { ref, computed, reactive, provide, watch, toRaw, onBeforeUnmount } from "vue";
+import { ref, computed, reactive, provide, watch, toRaw } from "vue";
 import { useRuntimeConfig } from "nuxt/app";
 import { api } from "#imports";
 const emits = defineEmits(["logout"]);
@@ -47,7 +47,8 @@ const tt = await q({
       label: true,
       path: true,
       icon: true
-    }
+    },
+    menu: true
   }
 });
 let app = tt.app;
@@ -58,7 +59,6 @@ light.init(my.styles);
 light.setMyRoles(my.roles);
 light.setPermissions(my.permissions);
 light.setMyFavorites(toRaw(my.myFavorites));
-const _errorTimers = /* @__PURE__ */ new Map();
 const myFavorites = computed(() => {
   return light.getMyFavorites();
 });
@@ -75,6 +75,7 @@ for (let t of app.i18nMessages) {
 }
 i18n.setLocaleMessage(i18n.locale, messages);
 const menus = ref(app.menus);
+const my_menus = ref(my.menu);
 const leftDrawerOpen = ref(false);
 const rightDrawerOpen = ref(false);
 const toggleLeftDrawer = () => {
@@ -126,8 +127,16 @@ const onChangeLocale = async (locale) => {
   window.location.reload();
 };
 const reloadMenu = async () => {
-  let app2 = await q("app", ["menus"]);
+  let { app: app2, my: my2 } = await q({
+    app: {
+      menus: true
+    },
+    my: {
+      menu: true
+    }
+  });
   menus.value = app2.menus;
+  my_menus.value.menu = my2.menu;
 };
 provide("reloadMenu", reloadMenu);
 watch(() => style.footer, async (value) => await light.setStyle("footer", value));
@@ -346,6 +355,7 @@ const onLogout = async () => {
             <!-- drawer content -->
             <q-scroll-area class="fit">
                 <div class="q-mx-xs q-mt-xs">
+                    <l-menu :value="my_menus" :dense="style.dense" />
                     <l-fav-menu :value="myFavorites" :dense="style.dense" v-if="myFavoritesCount > 0" />
                     <l-menu :value="menus" :dense="style.dense" />
                 </div>

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

@@ -1,12 +1,12 @@
-declare var __VLS_30: {}, __VLS_180: {}, __VLS_267: {}, __VLS_273: {};
+declare var __VLS_30: {}, __VLS_180: {}, __VLS_271: {}, __VLS_277: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_30) => any;
 } & {
     'user-menu'?: (props: typeof __VLS_180) => any;
 } & {
-    'page-top'?: (props: typeof __VLS_267) => any;
+    'page-top'?: (props: typeof __VLS_271) => any;
 } & {
-    'page-bottom'?: (props: typeof __VLS_273) => any;
+    'page-bottom'?: (props: typeof __VLS_277) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     logout: (...args: any[]) => void;

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

@@ -431,17 +431,6 @@ const getCellStyle = (col, row) => {
   }
   return style;
 };
-const getCellClass = (col, row) => {
-  const cl = [];
-  if (col.cellClass) {
-    if (typeof col.cellClass == "function") {
-      cl.push(col.cellClass(row));
-    } else {
-      cl.push(col.cellClass);
-    }
-  }
-  return cl;
-};
 const localSelected = computed({
   get() {
     return props.selected;
@@ -574,7 +563,7 @@ const hasFilters = computed(() => {
                     </template>
                     <template v-else>
                         <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"
-                            :style="getCellStyle(col, props.row)" :class="getCellClass(col, props.row)"><template
+                            :style="getCellStyle(col, props.row)"><template
                                 v-if="col.to" class="bg-primary">
                                 <l-link :to="col.to(props.row)" v-if="col.to(props.row)">{{ col.value }}</l-link>
                             </template>

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

@@ -0,0 +1,149 @@
+<script setup>
+import { ref } from "vue";
+import { q, m, useAsyncData, useQuasar } from "#imports";
+const $q = useQuasar();
+const { data: system, refresh } = await useAsyncData("database-check", async () => {
+  const result = await q({
+    system: {
+      database: {
+        checkResult: true
+      }
+    }
+  });
+  return result.system;
+});
+const expanded = ref([]);
+const tableColumns = [
+  { name: "table", label: "Table", field: "table", align: "left" },
+  { name: "status", label: "Status", field: "status", align: "center" },
+  { name: "count", label: "Differences", field: (row) => row.differences.length, align: "center" },
+  { name: "action", label: "Action", field: "action", align: "center" }
+];
+const diffColumns = [
+  { name: "type", label: "Type", field: "type", align: "left" },
+  { name: "column", label: "Column", field: "column", align: "left" },
+  { name: "details", label: "Details", field: "details", align: "left" }
+];
+const getStatusColor = (status) => status === "OK" ? "positive" : "warning";
+const getDiffDetails = (diff) => {
+  if (diff.type === "missing_column") {
+    return `Missing: ${diff.expected.name} (${diff.expected.type})`;
+  }
+  if (diff.type === "extra_column") {
+    return `Extra: ${diff.current.type}${diff.current.length ? `(${diff.current.length})` : ""}`;
+  }
+  if (diff.type === "column_mismatch") {
+    return Object.entries(diff.differences).map(([key, val]) => `${key}: ${JSON.stringify(val)}`).join(" | ");
+  }
+  if (diff.current) {
+    return JSON.stringify(diff.current).substring(0, 100) + "...";
+  }
+  return "";
+};
+const getDiffTypeColor = (type) => {
+  switch (type) {
+    case "missing_column":
+      return "negative";
+    case "extra_column":
+      return "info";
+    case "column_mismatch":
+      return "warning";
+    default:
+      return "grey";
+  }
+};
+const toggleExpanded = (tableName) => {
+  const index = expanded.value.indexOf(tableName);
+  if (index === -1) {
+    expanded.value.push(tableName);
+  } else {
+    expanded.value.splice(index, 1);
+  }
+};
+const handleFix = async (tableName) => {
+  $q.dialog({
+    title: "Confirm Fix",
+    message: `Are you sure you want to fix the table "${tableName}"? This action cannot be undone.`,
+    cancel: true,
+    persistent: true
+  }).onOk(async () => {
+    await m("fixDatabaseTable", { name: tableName });
+    await refresh();
+  });
+};
+</script>
+
+<template>
+    <l-page>
+
+        <div class="q-mb-md">
+            <h5 class="q-ma-none">Database Check Results</h5>
+        </div>
+
+        <q-table :rows="system.database.checkResult" :columns="tableColumns" row-key="table" flat bordered
+            class="q-mb-lg" v-model:expanded="expanded" :pagination.sync="{ rowsPerPage: 0 }" hide-bottom>
+            <template #body="props">
+                <q-tr :props="props"
+                    :class="{ 'bg-red-1': props.row.status === 'DIFFERENT', 'bg-green-1': props.row.status === 'OK' }">
+                    <q-td auto-width>
+                        <q-btn size="sm" flat dense round
+                            :icon="expanded.includes(props.row.table) ? 'expand_less' : 'expand_more'"
+                            @click="toggleExpanded(props.row.table)" />
+                    </q-td>
+                    <q-td key="table" :props="props" class="text-weight-bold">
+                        {{ props.row.table }}
+                    </q-td>
+                    <q-td key="status" :props="props">
+                        <q-chip :label="props.row.status" :color="getStatusColor(props.row.status)" text-color="white"
+                            size="sm" />
+                    </q-td>
+                    <q-td key="count" :props="props">
+                        <q-chip v-if="props.row.differences.length > 0" :label="props.row.differences.length"
+                            color="warning" text-color="white" size="sm" />
+                        <span v-else class="text-positive">✓</span>
+                    </q-td>
+                    <q-td key="action" :props="props">
+                        <q-btn v-if="props.row.status !== 'OK'" label="Fix" size="sm" :color="$light.color"
+                            @click="handleFix(props.row.table)" />
+                    </q-td>
+                </q-tr>
+
+                <!-- Differences Details Expansion -->
+                <q-tr v-show="expanded.includes(props.row.table)" :props="props">
+                    <q-td colspan="100%" class="q-pa-none">
+                        <div class="q-pa-md bg-grey-1">
+                            <q-table v-if="props.row.differences.length > 0" :rows="props.row.differences"
+                                :columns="diffColumns" row-key="column" flat dense class="q-mb-md"
+                                :pagination.sync="{ rowsPerPage: 0 }" hide-bottom>
+                                <template #body-cell-type="cellProps">
+                                    <q-td :props="cellProps">
+                                        <q-chip :label="cellProps.row.type"
+                                            :color="getDiffTypeColor(cellProps.row.type)" text-color="white"
+                                            size="sm" />
+                                    </q-td>
+                                </template>
+                                <template #body-cell-details="cellProps">
+                                    <q-td :props="cellProps">
+                                        <q-expansion-item header-class="text-caption" expand-icon-class="text-caption"
+                                            dense>
+                                            <template #header>
+                                                <span class="text-caption">{{ getDiffDetails(cellProps.row) }}</span>
+                                            </template>
+                                            <pre class="q-ma-none text-caption">{{
+                                                JSON.stringify(cellProps.row.differences || cellProps.row.current ||
+                                                    cellProps.row.expected, null,
+                                                    2) }}
+                                            </pre>
+                                        </q-expansion-item>
+                                    </q-td>
+                                </template>
+                            </q-table>
+                            <div v-else class="text-positive text-weight-bold">✓ No Differences</div>
+                        </div>
+                    </q-td>
+                </q-tr>
+            </template>
+        </q-table>
+
+    </l-page>
+</template>

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

@@ -64,11 +64,10 @@ const removeField = async (table) => {
     ok: "Yes",
     cancel: "No"
   }).onOk(async () => {
-    const fields = selected[table].map((field) => field.Field);
     try {
       await m("lightDatabaseRemoveFields", {
         table,
-        fields
+        fields: selected[table].map((field) => field.name)
       });
       light.notify({
         type: "positive",
@@ -218,7 +217,7 @@ const truncatTable = async () => {
             <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="Field" :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat
+                        <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]" :color="$light.color">
                             <template #top-left>
                                 <q-btn icon="sym_o_add" @click="add(table.name)" round flat size="sm">

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

@@ -3,7 +3,7 @@ import { ref, reactive } from "vue";
 import { m, q } from "#imports";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
-const quasar = useQuasar();
+const $q = useQuasar();
 const { t } = useI18n();
 const app = await q("app", ["languages"]);
 const splitterModel = ref(62);
@@ -23,7 +23,7 @@ const onSave = async () => {
       })
     }
   });
-  quasar.notify({
+  $q.notify({
     message: "Save success",
     color: "positive",
     icon: "check"
@@ -56,7 +56,7 @@ const onUpdateTranslate = async (value, language, name) => {
     language,
     value
   })) {
-    quasar.notify({
+    $q.notify({
       message: "Update success",
       color: "positive",
       icon: "check"
@@ -67,7 +67,7 @@ const onDelete = async (name) => {
   if (await m("deleteTranslate", {
     name
   })) {
-    quasar.notify({
+    $q.notify({
       message: "Delete success",
       color: "positive",
       icon: "check"
@@ -82,7 +82,7 @@ const onDelete = async (name) => {
         <l-card>
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
-                    <q-table :rows="all" flat :rows-per-page-options="[0]" :columns="columns" dense separator="cell">
+                    <q-table :rows="all" flat :rows-per-page-options="[0]" :columns="columns" dense separator="cell"  :bordered="false">
                         <template #body="props">
                             <q-tr :props="props">
                                 <q-td key="_delete" auto-width>

package/dist/runtime/pages/User/setting/favorite.d.vue.ts

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

package/dist/runtime/pages/User/setting/favorite.vue

@@ -0,0 +1,164 @@
+<script setup>
+import { useLight, model, q } from "#imports";
+import { useQuasar } from "quasar";
+import { ref, watch, onMounted } from "vue";
+import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
+import { animations } from "@formkit/drag-and-drop";
+const light = useLight();
+const $q = useQuasar();
+const { my } = await q({
+  my: {
+    myFavorites: {
+      my_favorite_id: true,
+      label: true,
+      path: true,
+      icon: true,
+      sequence: true
+    }
+  }
+});
+const [parent, rows] = useDragAndDrop(my.myFavorites, {
+  plugins: [animations()],
+  dragHandle: ".drag-handle"
+});
+const isUpdating = ref(false);
+const hasChanges = ref(false);
+watch(rows, (newRows) => {
+  let hasChanged = false;
+  for (let i = 0; i < newRows.length; i++) {
+    if (newRows[i].sequence !== i + 1) {
+      hasChanged = true;
+      break;
+    }
+  }
+  hasChanges.value = hasChanged;
+}, { deep: true });
+const updateSequence = async () => {
+  if (isUpdating.value || !hasChanges.value) return;
+  isUpdating.value = true;
+  try {
+    for (let i = 0; i < rows.value.length; i++) {
+      const item = rows.value[i];
+      await model("MyFavorite").update(item.my_favorite_id, {
+        sequence: i + 1
+      });
+      item.sequence = i + 1;
+    }
+    await light.reloadMyFavorites();
+    hasChanges.value = false;
+    $q.notify({
+      message: "Order updated",
+      color: "positive",
+      icon: "check"
+    });
+  } catch (error) {
+    $q.notify({
+      message: "Update failed: " + error.message,
+      color: "negative",
+      icon: "error"
+    });
+  } finally {
+    isUpdating.value = false;
+  }
+};
+const onSave = async (id, data) => {
+  await model("MyFavorite").update(id, data);
+  $q.notify({
+    message: "Updated successfully",
+    color: "positive",
+    icon: "check"
+  });
+  const index = rows.value.findIndex((item) => item.my_favorite_id === id);
+  if (index !== -1) {
+    Object.assign(rows.value[index], data);
+  }
+  await light.reloadMyFavorites();
+};
+const onRemove = async (id) => {
+  await model("MyFavorite").delete(id);
+  const index = rows.value.findIndex((item) => item.my_favorite_id === id);
+  if (index !== -1) {
+    rows.value.splice(index, 1);
+  }
+  await light.reloadMyFavorites();
+};
+const columns = [
+  { name: "handler", label: "", field: "handler", align: "center" },
+  { name: "label", label: "Label", field: "label", align: "left" },
+  { name: "path", label: "Path", field: "path", align: "left" },
+  { name: "icon", label: "Icon", field: "icon", align: "center" },
+  { name: "actions", label: "Actions", field: "actions", align: "center" }
+];
+onMounted(() => {
+  parent.value = document.querySelector("#myfav-table .q-table__middle.scroll > table > tbody");
+});
+</script>
+
+<template>
+    <div>
+        <q-table id="myfav-table" :rows="rows" :columns="columns" row-key="my_favorite_id" flat :bordered="false"
+            :rows-per-page-options="[0]">
+
+            <template #body-cell-label="props">
+                <q-td :props="props">
+                    {{ props.row.label }}
+                    <q-popup-edit v-model="props.row.label" v-slot="scope" buttons
+                        @save="onSave(props.row.my_favorite_id, { 'label': $event })">
+                        <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
+                    </q-popup-edit>
+                </q-td>
+            </template>
+
+
+            <template #body-cell-icon="props">
+                <q-td :props="props" class="text-center" style="width: 80px;">
+                    <!-- Icon -->
+                    <l-icon-picker v-model="props.row.icon" flat round size="sm"
+                        @update:model-value="onSave(props.row.my_favorite_id, { 'icon': $event })" />
+                </q-td>
+
+            </template>
+
+            <template #body-cell-handler="props">
+                <q-td :props="props" class="drag-handle" style="cursor: move; width: 40px; text-align: center;">
+                    <q-icon name="drag_handle" />
+                </q-td>
+            </template>
+            <!-- 操作列 -->
+            <template #body-cell-actions="props">
+                <q-td :props="props">
+                    <q-btn icon="sym_o_delete" color="negative" flat dense @click="onRemove(props.row.my_favorite_id)"
+                        :disable="saving">
+                        <q-tooltip>Delete item</q-tooltip>
+                    </q-btn>
+                </q-td>
+            </template>
+
+            <template #no-data>
+                <div class="text-center q-pa-md">
+                    <l-icon name="sym_o_favorite_border" size="48px" class="text-grey-5" />
+                    <div class="text-h6 q-mt-sm">No favorites added yet</div>
+                    <div class="text-subtitle2 text-grey-6 q-mt-xs">
+                        You can add frequently used features here for quick access.
+                    </div>
+                </div>
+            </template>
+        </q-table>
+
+        <!-- 更新按鈕 -->
+        <div v-if="hasChanges" class="q-mt-md text-center">
+            <q-btn color="primary" icon="save" label="Update Order" @click="updateSequence" :loading="isUpdating"
+                :disable="isUpdating" />
+        </div>
+
+        <!-- 狀態提示 -->
+        <div v-if="isUpdating" class="q-mt-md">
+            <q-linear-progress indeterminate color="primary" />
+            <div class="text-center q-mt-sm text-grey-6">Updating order...</div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.drag-list{border-radius:8px;overflow:hidden}.drag-item{transition:all .2s}.drag-item:hover{background-color:rgba(0,0,0,.02)}.drag-handle{cursor:move;min-width:40px;padding:0 8px}.drag-handle:hover .q-icon{color:var(--q-primary)!important}:deep(.formkit-dnd-is-dragging){background-color:rgba(25,118,210,.05);box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:.7;transform:scale(1.02)}:deep(.formkit-dnd-placeholder){align-items:center;background-color:rgba(25,118,210,.1);border:2px dashed var(--q-primary);border-radius:4px;display:flex;height:72px;justify-content:center;margin:2px 0}:deep(.formkit-dnd-placeholder:before){color:var(--q-primary);content:"Drop here";font-size:14px;font-weight:500}
+</style>

package/dist/runtime/pages/User/setting/favorite.vue.d.ts

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

package/dist/runtime/pages/User/setting/index.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { reset } from "@formkit/core";
 import { q, m, notify } from "#imports";
 const { my } = await q({
   my: {

package/dist/runtime/pages/User/setting/menu.d.vue.ts

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

package/dist/runtime/pages/User/setting/menu.vue

@@ -0,0 +1,422 @@
+<script setup>
+import { ref, computed, inject } from "vue";
+import { q, m } from "#imports";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+const reloadMenu = inject("reloadMenu");
+const { t } = useI18n();
+const $q = useQuasar();
+const { app, my } = await q({
+  app: {
+    menus: true
+  },
+  my: {
+    menu: true
+  }
+});
+const getUUID = () => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    let r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  }).toUpperCase();
+};
+const convertMenusToTree = (menus) => {
+  if (!menus) return [];
+  return menus.map((menu) => ({
+    ...menu,
+    uuid: menu.uuid || getUUID(),
+    icon: menu.icon || "sym_o_menu",
+    children: menu.children ? convertMenusToTree(menu.children) : []
+  }));
+};
+const availableMenus = ref(convertMenusToTree(app.menus));
+const userMenus = ref([
+  {
+    label: "[My Menu]",
+    uuid: "ROOT",
+    children: my.menu,
+    type: "root"
+  }
+]);
+const selectedNode = ref("ROOT");
+const splitterModel = ref(30);
+const userMenuTree = ref(null);
+const currentNodeDetail = computed(() => {
+  if (selectedNode.value === "ROOT") return userMenus.value[0];
+  if (!userMenuTree.value) return null;
+  return userMenuTree.value.getNodeByKey(selectedNode.value);
+});
+const cloneMenuWithChildren = (menu, parentUuid) => {
+  const clonedMenu = {
+    ...menu,
+    uuid: getUUID(),
+    parent: parentUuid,
+    children: []
+  };
+  if (menu.children && menu.children.length > 0) {
+    clonedMenu.children = menu.children.map(
+      (child) => cloneMenuWithChildren(child, clonedMenu.uuid)
+    );
+  }
+  return clonedMenu;
+};
+const addMenuToCustom = (menu) => {
+  const targetNode = currentNodeDetail.value;
+  if (!targetNode) return;
+  const newMenuItem = cloneMenuWithChildren(menu, targetNode.uuid);
+  if (!targetNode.children) targetNode.children = [];
+  targetNode.children.push(newMenuItem);
+  if (userMenuTree.value && targetNode.uuid !== "ROOT") {
+    userMenuTree.value.setExpanded(selectedNode.value, true);
+  }
+  if (newMenuItem.children && newMenuItem.children.length > 0) {
+    setTimeout(() => {
+      if (userMenuTree.value) {
+        userMenuTree.value.setExpanded(newMenuItem.uuid, true);
+      }
+    }, 100);
+  }
+};
+const createNewFolder = () => {
+  $q.dialog({
+    title: "Create New Folder",
+    message: "Please enter folder name",
+    prompt: {
+      model: "",
+      type: "text"
+    },
+    cancel: true,
+    persistent: true
+  }).onOk((folderName) => {
+    if (folderName.trim() === "") return;
+    const targetNode = currentNodeDetail.value;
+    if (!targetNode) return;
+    const newFolder = {
+      label: folderName,
+      uuid: getUUID(),
+      parent: targetNode.uuid,
+      children: [],
+      icon: "sym_o_folder"
+    };
+    if (!targetNode.children) targetNode.children = [];
+    targetNode.children.push(newFolder);
+    if (userMenuTree.value && targetNode.uuid !== "ROOT") {
+      userMenuTree.value.setExpanded(selectedNode.value, true);
+    }
+  });
+};
+const createNewSubItem = () => {
+  $q.dialog({
+    title: "Create New Sub Item",
+    message: "Please enter item name",
+    prompt: {
+      model: "",
+      type: "text"
+    },
+    cancel: true,
+    persistent: true
+  }).onOk((itemName) => {
+    if (itemName.trim() === "") return;
+    const targetNode = currentNodeDetail.value;
+    if (!targetNode) return;
+    const newItem = {
+      label: itemName,
+      uuid: getUUID(),
+      parent: targetNode.uuid,
+      children: [],
+      icon: "sym_o_menu",
+      to: ""
+    };
+    if (!targetNode.children) targetNode.children = [];
+    targetNode.children.push(newItem);
+    if (userMenuTree.value && targetNode.uuid !== "ROOT") {
+      userMenuTree.value.setExpanded(selectedNode.value, true);
+    }
+    selectedNode.value = newItem.uuid;
+  });
+};
+const addSeparator = () => {
+  const targetNode = currentNodeDetail.value;
+  if (!targetNode) return;
+  const separator = {
+    label: "[Separator]",
+    uuid: getUUID(),
+    parent: targetNode.uuid,
+    children: [],
+    type: "separator",
+    spaced: true
+  };
+  if (!targetNode.children) targetNode.children = [];
+  targetNode.children.push(separator);
+};
+const removeMenuItem = (node) => {
+  if (node.type === "root") return;
+  $q.dialog({
+    title: "Confirm Delete",
+    message: `Are you sure you want to delete "${node.label}"?`,
+    cancel: true,
+    persistent: true
+  }).onOk(() => {
+    const parent = getParentNode(node);
+    if (parent && parent.children) {
+      parent.children = parent.children.filter((item) => item.uuid !== node.uuid);
+      selectedNode.value = parent.uuid;
+    }
+  });
+};
+const getParentNode = (node) => {
+  if (!node.parent || node.parent === "ROOT") {
+    return userMenus.value[0];
+  }
+  return userMenuTree.value.getNodeByKey(node.parent);
+};
+const moveUp = (node) => {
+  const parent = getParentNode(node);
+  if (!parent || !parent.children) return;
+  const index = parent.children.findIndex((item) => item.uuid === node.uuid);
+  if (index > 0) {
+    const temp = parent.children[index - 1];
+    parent.children[index - 1] = node;
+    parent.children[index] = temp;
+  }
+};
+const moveDown = (node) => {
+  const parent = getParentNode(node);
+  if (!parent || !parent.children) return;
+  const index = parent.children.findIndex((item) => item.uuid === node.uuid);
+  if (index < parent.children.length - 1) {
+    const temp = parent.children[index + 1];
+    parent.children[index + 1] = node;
+    parent.children[index] = temp;
+  }
+};
+const showMoveDialog = ref(false);
+const moveTarget = ref(null);
+const moveToGroup = () => {
+  showMoveDialog.value = true;
+  moveTarget.value = null;
+};
+const confirmMove = () => {
+  if (!moveTarget.value || !currentNodeDetail.value) return;
+  const nodeToMove = JSON.parse(JSON.stringify(currentNodeDetail.value));
+  removeMenuItem(currentNodeDetail.value);
+  nodeToMove.parent = moveTarget.value;
+  const targetNode = moveTarget.value === "ROOT" ? userMenus.value[0] : userMenuTree.value.getNodeByKey(moveTarget.value);
+  if (!targetNode.children) targetNode.children = [];
+  targetNode.children.push(nodeToMove);
+  if (userMenuTree.value && moveTarget.value !== "ROOT") {
+    userMenuTree.value.setExpanded(moveTarget.value, true);
+  }
+  showMoveDialog.value = false;
+  selectedNode.value = nodeToMove.uuid;
+};
+const saveCustomMenus = async () => {
+  console.log("User custom menu structure:", userMenus.value[0].children);
+  try {
+    await m("updateMyMenu", {
+      menu: userMenus.value[0].children
+    });
+    if (reloadMenu) {
+      reloadMenu();
+    }
+  } catch (e) {
+    console.error("Failed to save custom menu:", e);
+    $q.notify({
+      message: "Failed to save custom menu",
+      color: "negative",
+      icon: "error",
+      position: "top",
+      timeout: 2e3
+    });
+    return;
+  }
+  $q.notify({
+    message: "Menu structure saved successfully",
+    color: "positive",
+    icon: "check",
+    position: "top",
+    timeout: 2e3
+  });
+};
+const resetMenus = () => {
+  $q.dialog({
+    title: "Confirm Reset",
+    message: "This will clear all custom menu settings. Are you sure you want to reset?",
+    cancel: true,
+    persistent: true
+  }).onOk(() => {
+    userMenus.value[0].children = [];
+    selectedNode.value = "ROOT";
+  });
+};
+</script>
+
+<template>
+    <div>
+        <!-- Move to group dialog -->
+        <q-dialog v-model="showMoveDialog">
+            <l-card>
+                <q-card-section>
+                    <div class="text-h6">Select Move Target</div>
+                    <q-tree :nodes="userMenus" :selected-color="$light.color" default-expand-all
+                        v-model:selected="moveTarget" node-key="uuid" />
+                </q-card-section>
+                <q-card-actions align="right">
+                    <q-btn flat label="Cancel" :color="$light.color" v-close-popup />
+                    <q-btn flat label="Move" :color="$light.color" @click="confirmMove" />
+                </q-card-actions>
+            </l-card>
+        </q-dialog>
+
+        <l-card>
+            <q-card-actions class="q-gutter-sm">
+                <l-btn @click="saveCustomMenus" label="Save Custom Menu" icon="sym_o_save" />
+                <l-btn @click="resetMenus" label="Reset Menu" icon="sym_o_refresh" />
+            </q-card-actions>
+
+            <q-splitter v-model="splitterModel" style="height:680px">
+                <template #before>
+                    <div class="q-pa-md">
+                        <div class="text-h6 q-mb-md">Available Menu Items</div>
+                        <q-tree :nodes="availableMenus" :selected-color="$light.color" default-expand-all
+                            node-key="uuid">
+                            <template v-slot:default-header="prop">
+                                <div class="row items-center full-width">
+                                    <q-icon :name="prop.node.icon || 'sym_o_menu'" class="q-mr-sm" size="sm" />
+                                    <span>{{ prop.node.label }}</span>
+                                    <q-space />
+                                    <small v-if="prop.node.to" class="text-grey-6 q-mr-sm">{{ prop.node.to }}</small>
+                                    <q-btn flat round dense size="sm" icon="sym_o_add" color="positive"
+                                        @click.stop="addMenuToCustom(prop.node)">
+                                        <q-tooltip>Add to My Menu</q-tooltip>
+                                    </q-btn>
+                                </div>
+                            </template>
+                        </q-tree>
+                    </div>
+                </template>
+
+                <template #after>
+                    <div class="q-pa-md">
+                        <div class="text-h6 q-mb-md">My Custom Menu</div>
+
+                        <!-- Action buttons -->
+                        <q-card-actions class="q-mb-md q-gutter-xs" v-if="currentNodeDetail">
+                            <template v-if="currentNodeDetail.type === 'root'">
+                                <q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add' })" icon="sym_o_add"
+                                    size="sm">
+                                    <q-list>
+                                        <q-item clickable v-close-popup @click="createNewFolder">
+                                            <q-item-section avatar>
+                                                <q-icon name="sym_o_folder" color="orange" />
+                                            </q-item-section>
+                                            <q-item-section>
+                                                <q-item-label>Add Folder</q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                        <q-item clickable v-close-popup @click="createNewSubItem">
+                                            <q-item-section avatar>
+                                                <q-icon name="sym_o_menu" />
+                                            </q-item-section>
+                                            <q-item-section>
+                                                <q-item-label>Add Sub Item</q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                        <q-item clickable v-close-popup @click="addSeparator">
+                                            <q-item-section avatar>
+                                                <q-icon name="sym_o_more_horiz" color="grey" />
+                                            </q-item-section>
+                                            <q-item-section>
+                                                <q-item-label>Add Separator</q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                    </q-list>
+                                </q-btn-dropdown>
+                            </template>
+                            <template v-else>
+                                <q-btn-dropdown v-bind="$light.getButtonProps({ label: 'Add' })" icon="sym_o_add"
+                                    size="sm">
+                                    <q-list>
+                                        <q-item clickable v-close-popup @click="createNewFolder">
+                                            <q-item-section avatar>
+                                                <q-icon name="sym_o_folder" color="orange" />
+                                            </q-item-section>
+                                            <q-item-section>
+                                                <q-item-label>Add Folder</q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                        <q-item clickable v-close-popup @click="createNewSubItem">
+                                            <q-item-section avatar>
+                                                <q-icon name="sym_o_menu" />
+                                            </q-item-section>
+                                            <q-item-section>
+                                                <q-item-label>Add Sub Item</q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                        <q-item clickable v-close-popup @click="addSeparator">
+                                            <q-item-section avatar>
+                                                <q-icon name="sym_o_more_horiz" color="grey" />
+                                            </q-item-section>
+                                            <q-item-section>
+                                                <q-item-label>Add Separator</q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                    </q-list>
+                                </q-btn-dropdown>
+
+                                <l-btn @click="removeMenuItem(currentNodeDetail)" label="Delete" icon="sym_o_delete"
+                                    size="sm" color="negative" />
+                                <l-btn @click="moveUp(currentNodeDetail)" label="Move Up" icon="sym_o_arrow_upward"
+                                    size="sm" />
+                                <l-btn @click="moveDown(currentNodeDetail)" label="Move Down" icon="sym_o_arrow_downward"
+                                    size="sm" />
+                                <l-btn @click="moveToGroup" label="Move to..." icon="sym_o_drive_file_move" size="sm" />
+                            </template>
+                        </q-card-actions>
+
+                        <!-- Menu tree -->
+                        <q-tree :nodes="userMenus" :selected-color="$light.color" default-expand-all
+                            v-model:selected="selectedNode" node-key="uuid" ref="userMenuTree">
+                            <template v-slot:default-header="prop">
+                                <div class="row items-center full-width">
+                                    <q-icon :name="prop.node.type === 'separator' ? 'sym_o_more_horiz' :
+                                        prop.node.type === 'root' ? 'sym_o_account_tree' :
+                                            prop.node.icon || 'sym_o_menu'" class="q-mr-sm" size="sm" :color="prop.node.type === 'separator' ? 'grey' :
+                                                prop.node.type === 'root' ? 'primary' : undefined" />
+                                    <span :class="{
+                                        'text-grey-6': prop.node.type === 'separator',
+                                        'text-primary': prop.node.type === 'root'
+                                    }">
+                                        {{ prop.node.label }}
+                                    </span>
+                                    <q-space />
+                                    <small v-if="prop.node.to" class="text-grey-6">{{ prop.node.to }}</small>
+                                </div>
+                            </template>
+                        </q-tree>
+
+                        <!-- Current selected node detail settings -->
+                        <div v-if="currentNodeDetail && currentNodeDetail.type !== 'root'" class="q-mt-lg">
+                            <q-separator class="q-mb-md" />
+                            <div class="text-subtitle1 q-mb-md">Menu Settings</div>
+
+                            <template v-if="currentNodeDetail.type === 'separator'">
+                                <div class="q-gutter-md">
+                                    <l-checkbox label="Spaced Separator" v-model="currentNodeDetail.spaced" />
+                                </div>
+                            </template>
+
+                            <template v-else>
+                                <div class="q-gutter-md">
+                                    <l-input label="Label" v-model="currentNodeDetail.label" />
+                                    <l-input label="Route" v-model="currentNodeDetail.to" />
+                                    <l-icon-picker label="Icon" v-model="currentNodeDetail.icon" />
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </template>
+            </q-splitter>
+        </l-card>
+    </div>
+</template>

package/dist/runtime/pages/User/setting/menu.vue.d.ts

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

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

@@ -24,9 +24,11 @@ const route = useRoute();
                             exact />
                         <q-route-tab name="openid" icon="sym_o_key" :label="$t('Open ID')" to="/User/setting/open_id"
                             exact />
-                        <q-route-tab name="myfav" icon="sym_o_favorite" :label="$t('My favorite')"
-                            to="/User/setting/my_favorite" exact />
+                        <q-route-tab name="fav" icon="sym_o_favorite" :label="$t('Favorite')"
+                            to="/User/setting/favorite" exact />
 
+                        <q-route-tab name="menu" icon="sym_o_menu" :label="$t('Menu')"
+                            to="/User/setting/menu" exact />
                     </q-tabs>
                 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.50.0",
+  "version": "1.51.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",

package/dist/runtime/pages/User/setting/my_favorite.vue

@@ -1,156 +0,0 @@
-<script setup>
-import { useLight, model, q } from "#imports";
-import { useQuasar } from "quasar";
-import { ref, watch } from "vue";
-import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
-import { animations } from "@formkit/drag-and-drop";
-const light = useLight();
-const $q = useQuasar();
-const { my } = await q({
-  my: {
-    myFavorites: {
-      my_favorite_id: true,
-      label: true,
-      path: true,
-      icon: true,
-      sequence: true
-    }
-  }
-});
-const [dragParent, rows] = useDragAndDrop(my.myFavorites, {
-  plugins: [animations()],
-  dragHandle: ".drag-handle"
-});
-const isUpdating = ref(false);
-watch(rows, async (newRows) => {
-  if (isUpdating.value) return;
-  let hasChanged = false;
-  for (let i = 0; i < newRows.length; i++) {
-    if (newRows[i].sequence !== i + 1) {
-      hasChanged = true;
-      break;
-    }
-  }
-  if (!hasChanged) return;
-  isUpdating.value = true;
-  try {
-    for (let i = 0; i < newRows.length; i++) {
-      const item = newRows[i];
-      await model("MyFavorite").update(item.my_favorite_id, {
-        sequence: i + 1
-      });
-      item.sequence = i + 1;
-    }
-    await light.reloadMyFavorites();
-    $q.notify({
-      message: "\u9806\u5E8F\u5DF2\u66F4\u65B0",
-      color: "positive",
-      icon: "check"
-    });
-  } catch (error) {
-    $q.notify({
-      message: "\u66F4\u65B0\u5931\u6557: " + error.message,
-      color: "negative",
-      icon: "error"
-    });
-  } finally {
-    isUpdating.value = false;
-  }
-}, { deep: true });
-const onSave = async (id, data) => {
-  await model("MyFavorite").update(id, data);
-  $q.notify({
-    message: "Updated successfully",
-    color: "positive",
-    icon: "check"
-  });
-  const index = rows.value.findIndex((item) => item.my_favorite_id === id);
-  if (index !== -1) {
-    Object.assign(rows.value[index], data);
-  }
-  await light.reloadMyFavorites();
-};
-const onRemove = async (id) => {
-  await model("MyFavorite").delete(id);
-  const index = rows.value.findIndex((item) => item.my_favorite_id === id);
-  if (index !== -1) {
-    rows.value.splice(index, 1);
-  }
-  await light.reloadMyFavorites();
-};
-</script>
-
-<template>
-    <div>
-        <q-list ref="dragParent" bordered separator class="drag-list">
-            <q-item
-                v-for="(row, index) in rows" 
-                :key="row.my_favorite_id" 
-                class="drag-item"
-                clickable
-            >
-                <!-- 拖拽手柄 -->
-                <q-item-section avatar class="drag-handle">
-                    <q-icon name="drag_handle" class="cursor-move" color="grey-6" />
-                </q-item-section>
-
-                <!-- 主要內容 -->
-                <q-item-section>
-                    <q-item-label>
-                        <div class="row items-center q-gutter-sm">
-                            <!-- Icon -->
-                            <l-icon-picker 
-                                v-model="row.icon" 
-                                flat 
-                                round 
-                                size="sm"
-                                @update:model-value="onSave(row.my_favorite_id, { 'icon': $event })" 
-                            />
-                            
-                            <!-- Label -->
-                            <span class="text-weight-medium">
-                                {{ row.label }}
-                                <q-popup-edit v-model="row.label" #default="scope" buttons
-                                    @save="onSave(row.my_favorite_id, { 'label': $event })">
-                                    <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
-                                </q-popup-edit>
-                            </span>
-                        </div>
-                    </q-item-label>
-                    
-                    <q-item-label caption class="text-grey-7">
-                        {{ row.path }}
-                        <q-popup-edit v-model="row.path" #default="scope" buttons
-                            @save="onSave(row.my_favorite_id, { 'path': $event })">
-                            <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
-                        </q-popup-edit>
-                    </q-item-label>
-                </q-item-section>
-
-                <!-- 操作按鈕 -->
-                <q-item-section side>
-                    <q-btn 
-                        flat 
-                        round 
-                        icon="sym_o_delete" 
-                        size="sm"
-                        color="negative"
-                        @click="onRemove(row.my_favorite_id)"
-                    >
-                        <q-tooltip>刪除</q-tooltip>
-                    </q-btn>
-                </q-item-section>
-            </q-item>
-        </q-list>
-
-        <!-- 狀態提示 -->
-        <div v-if="isUpdating" class="q-mt-md">
-            <q-linear-progress indeterminate color="primary" />
-            <div class="text-center q-mt-sm text-grey-6">正在更新順序...</div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.drag-list{border-radius:8px;overflow:hidden}.drag-item{transition:all .2s}.drag-item:hover{background-color:rgba(0,0,0,.02)}.drag-handle{cursor:move;min-width:40px;padding:0 8px}.drag-handle:hover .q-icon{color:var(--q-primary)!important}:deep(.formkit-dnd-is-dragging){background-color:rgba(25,118,210,.05);box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:.7;transform:scale(1.02)}:deep(.formkit-dnd-placeholder){align-items:center;background-color:rgba(25,118,210,.1);border:2px dashed var(--q-primary);border-radius:4px;display:flex;height:72px;justify-content:center;margin:2px 0}:deep(.formkit-dnd-placeholder:before){color:var(--q-primary);content:"放置在此處";font-size:14px;font-weight:500}
-</style>