@hostlink/nuxt-light 1.50.0 → 1.51.1

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>