@hostlink/nuxt-light 1.55.0 → 1.55.2

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

@@ -74,76 +74,76 @@ const handleFix = async (tableName) => {
 </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="primary"
-                            @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>
+    <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="primary"
+                            @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/event.vue

@@ -36,55 +36,55 @@ const getEvent = async (name) => {
 </script>
 
 <template>
-    <l-page>
-
-        <q-table :rows="system.database.events" :pagination="{ rowsPerPage: 0 }" v-model:selected="selected"
-            row-key="Name" selection="single" />
-
-        <!-- 顯示選中的事件詳細內容 -->
-        <div v-if="eventDetail" class="q-mt-md">
-            <q-card>
-                <q-card-section>
-                    <div class="text-h6">事件詳細資料 - {{ eventDetail.Event }}</div>
-                </q-card-section>
-                <q-card-section>
-                    <div class="row q-gutter-md">
-                        <div class="col-12 col-md-6">
-                            <q-card flat bordered>
-                                <q-card-section>
-                                    <div class="text-subtitle1 text-weight-bold">基本資訊</div>
-                                    <q-separator class="q-my-sm" />
-                                    <div class="q-gutter-sm">
-                                        <div><strong>事件名稱:</strong> {{ eventDetail.Event }}</div>
-                                        <div>
-                                            <strong>SQL 模式:</strong>
-                                            <div class="q-mt-xs text-caption"
-                                                style="word-break: break-all; line-height: 1.3;">
-                                                {{ eventDetail.sql_mode }}
-                                            </div>
-                                        </div>
-                                        <div><strong>時區:</strong> {{ eventDetail.time_zone }}</div>
-                                        <div><strong>字符集:</strong> {{ eventDetail.character_set_client }}</div>
-                                        <div><strong>連接校對:</strong> {{ eventDetail.collation_connection }}</div>
-                                        <div><strong>資料庫校對:</strong> {{ eventDetail['Database Collation'] }}</div>
-                                    </div>
-                                </q-card-section>
-                            </q-card>
-                        </div>
-                        <div class="col-12 col-md-6">
-                            <q-card flat bordered>
-                                <q-card-section>
-                                    <div class="text-subtitle1 text-weight-bold">事件定義</div>
-                                    <q-separator class="q-my-sm" />
-                                    <pre class="q-pa-sm bg-grey-1" style="white-space: pre-wrap; font-size: 12px;">{{
-                                        eventDetail['Create Event'] }}</pre>
-                                </q-card-section>
-                            </q-card>
-                        </div>
-                    </div>
-                </q-card-section>
-            </q-card>
-        </div>
-
-    </l-page>
+    <l-page>
+
+        <q-table :rows="system.database.events" :pagination="{ rowsPerPage: 0 }" v-model:selected="selected"
+            row-key="Name" selection="single" />
+
+        <!-- 顯示選中的事件詳細內容 -->
+        <div v-if="eventDetail" class="q-mt-md">
+            <q-card>
+                <q-card-section>
+                    <div class="text-h6">事件詳細資料 - {{ eventDetail.Event }}</div>
+                </q-card-section>
+                <q-card-section>
+                    <div class="row q-gutter-md">
+                        <div class="col-12 col-md-6">
+                            <q-card flat bordered>
+                                <q-card-section>
+                                    <div class="text-subtitle1 text-weight-bold">基本資訊</div>
+                                    <q-separator class="q-my-sm" />
+                                    <div class="q-gutter-sm">
+                                        <div><strong>事件名稱:</strong> {{ eventDetail.Event }}</div>
+                                        <div>
+                                            <strong>SQL 模式:</strong>
+                                            <div class="q-mt-xs text-caption"
+                                                style="word-break: break-all; line-height: 1.3;">
+                                                {{ eventDetail.sql_mode }}
+                                            </div>
+                                        </div>
+                                        <div><strong>時區:</strong> {{ eventDetail.time_zone }}</div>
+                                        <div><strong>字符集:</strong> {{ eventDetail.character_set_client }}</div>
+                                        <div><strong>連接校對:</strong> {{ eventDetail.collation_connection }}</div>
+                                        <div><strong>資料庫校對:</strong> {{ eventDetail['Database Collation'] }}</div>
+                                    </div>
+                                </q-card-section>
+                            </q-card>
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <q-card flat bordered>
+                                <q-card-section>
+                                    <div class="text-subtitle1 text-weight-bold">事件定義</div>
+                                    <q-separator class="q-my-sm" />
+                                    <pre class="q-pa-sm bg-grey-1" style="white-space: pre-wrap; font-size: 12px;">{{
+                                        eventDetail['Create Event'] }}</pre>
+                                </q-card-section>
+                            </q-card>
+                        </div>
+                    </div>
+                </q-card-section>
+            </q-card>
+        </div>
+
+    </l-page>
 </template>

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

@@ -32,25 +32,25 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <l-page title="System Database Process">
-        <q-table :rows="data?.database?.processList || []" hide-bottom v-bind="$light.styles.table" :loading="loading">
-            <template #top-left>
-                <q-btn label="Reload" outline color="primary" icon="sym_o_refresh" @click="refresh"></q-btn>
-            </template>
-            <template #top-right>
-                <q-select label="Auto Refresh" v-model="autoRefresh" :options="[
-                    { label: 'Off', value: 0 },
-                    { label: '5s', value: 5000 },
-                    { label: '10s', value: 10000 },
-                    { label: '30s', value: 30000 },
-                    { label: '1m', value: 60000 },
-                    { label: '5m', value: 300000 },
-                    { label: '10m', value: 600000 },
-                    { label: '30m', value: 1800000 },
-                    { label: '1h', value: 3600000 }
-                ]" @update:model-value="autoRefresh && refresh()" outlined dense style="min-width: 200px" map-options
-                    emit-value></q-select>
-            </template>
-        </q-table>
-    </l-page>
+    <l-page title="System Database Process">
+        <q-table :rows="data?.database?.processList || []" hide-bottom v-bind="$light.styles.table" :loading="loading">
+            <template #top-left>
+                <q-btn label="Reload" outline color="primary" icon="sym_o_refresh" @click="refresh"></q-btn>
+            </template>
+            <template #top-right>
+                <q-select label="Auto Refresh" v-model="autoRefresh" :options="[
+                    { label: 'Off', value: 0 },
+                    { label: '5s', value: 5000 },
+                    { label: '10s', value: 10000 },
+                    { label: '30s', value: 30000 },
+                    { label: '1m', value: 60000 },
+                    { label: '5m', value: 300000 },
+                    { label: '10m', value: 600000 },
+                    { label: '30m', value: 1800000 },
+                    { label: '1h', value: 3600000 }
+                ]" @update:model-value="autoRefresh && refresh()" outlined dense style="min-width: 200px" map-options
+                    emit-value></q-select>
+            </template>
+        </q-table>
+    </l-page>
 </template>

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

@@ -90,116 +90,116 @@ onMounted(() => {
 </script>
 
 <template>
-    <l-page title="資料庫還原">
-        <div class="import-container">
-            <!-- 頁面說明 -->
-            <l-card class="info-card">
-                <div class="card-header">
-                    <h5 class="card-title">
-                        <q-icon name="sym_o_info" class="text-primary" />
-                        還原說明
-                    </h5>
-                </div>
-                <div class="card-content">
-                    <p class="description">
-                        資料庫還原功能可以從 SQL 備份檔案恢復資料庫內容。
-                        請確保上傳的 SQL 檔案來源可信且格式正確。
-                    </p>
-                </div>
-            </l-card>
-
-            <!-- 當前資料庫資訊 -->
-            <l-card class="status-card">
-                <div class="card-header">
-                    <h5 class="card-title">
-                        <q-icon name="sym_o_database" class="text-secondary" />
-                        當前資料庫資訊
-                    </h5>
-                </div>
-                <div class="card-content">
-                    <div class="info-grid">
-                        <div class="info-item" v-if="databaseInfo">
-                            <q-icon name="sym_o_storage" class="info-icon" />
-                            <div class="info-content">
-                                <span class="info-label">資料庫類型</span>
-                                <span class="info-value">{{ databaseInfo.type || '未知' }}</span>
-                            </div>
-                        </div>
-                        <div class="info-item" v-if="databaseInfo">
-                            <q-icon name="sym_o_storage" class="info-icon" />
-                            <div class="info-content">
-                                <span class="info-label">當前大小</span>
-                                <span class="info-value">{{ databaseInfo.sizeBytes ? (databaseInfo.sizeBytes / 1024 /
-                                    1024).toFixed(2) + ' MB' : '計算中...' }}</span>
-                            </div>
-                        </div>
-                        <div class="info-item" v-if="databaseInfo && databaseInfo.version">
-                            <q-icon name="sym_o_info" class="info-icon" />
-                            <div class="info-content">
-                                <span class="info-label">資料庫版本</span>
-                                <span class="info-value">{{ databaseInfo.version }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </l-card>
-
-            <!-- 安全警告 -->
-            <l-alert type="negative" class="security-alert">
-                <template #prefix>
-                    <q-icon name="sym_o_warning" />
-                </template>
-                <strong>重要警告：</strong>還原資料庫將會完全覆蓋現有資料，此操作無法復原。建議在還原前先進行當前資料庫的備份。
-            </l-alert>
-
-            <!-- 檔案上傳區域 -->
-            <l-card class="upload-card">
-                <div class="card-header">
-                    <h5 class="card-title">
-                        <q-icon name="sym_o_upload" class="text-primary" />
-                        選擇備份檔案
-                    </h5>
-                </div>
-                <div class="card-content">
-                    <div class="upload-area" :class="{ 'has-file': selectedFile }">
-                        <input ref="fileInput" type="file" accept=".sql,application/sql" @change="onFileChange"
-                            class="file-input" id="sql-file-input" />
-
-                        <div v-if="!selectedFile" class="upload-placeholder">
-                            <q-icon name="sym_o_cloud_upload" class="upload-icon" />
-                            <p class="upload-text">點擊選擇 SQL 檔案</p>
-                            <p class="upload-hint">支援 .sql 格式的檔案</p>
-                            <label for="sql-file-input" class="upload-button">
-                                <l-btn label="選擇檔案" icon="sym_o_folder_open" color="primary" />
-                            </label>
-                        </div>
-
-                        <div v-else class="file-info">
-                            <div class="file-details">
-                                <q-icon name="sym_o_description" class="file-icon" />
-                                <div class="file-content">
-                                    <span class="file-name">{{ selectedFile.name }}</span>
-                                    <span class="file-size">{{ formatFileSize(selectedFile.size) }}</span>
-                                </div>
-                            </div>
-                            <l-btn icon="sym_o_close" color="negative" flat round @click="clearFile"
-                                class="remove-btn" />
-                        </div>
-                    </div>
-                </div>
-            </l-card>
-
-            <!-- 還原按鈕區域 -->
-            <div class="restore-section">
-                <l-btn :label="isUploading ? '正在還原中...' : '開始還原資料庫'" icon="sym_o_restore" color="primary" size="lg"
-                    :loading="isUploading" :disabled="isUploading || !selectedFile" @click="onClickRestore"
-                    class="restore-btn" />
-                <p class="restore-hint">
-                    請確認已備份當前資料庫，還原操作將無法復原
-                </p>
-            </div>
-        </div>
-    </l-page>
+    <l-page title="資料庫還原">
+        <div class="import-container">
+            <!-- 頁面說明 -->
+            <l-card class="info-card">
+                <div class="card-header">
+                    <h5 class="card-title">
+                        <q-icon name="sym_o_info" class="text-primary" />
+                        還原說明
+                    </h5>
+                </div>
+                <div class="card-content">
+                    <p class="description">
+                        資料庫還原功能可以從 SQL 備份檔案恢復資料庫內容。
+                        請確保上傳的 SQL 檔案來源可信且格式正確。
+                    </p>
+                </div>
+            </l-card>
+
+            <!-- 當前資料庫資訊 -->
+            <l-card class="status-card">
+                <div class="card-header">
+                    <h5 class="card-title">
+                        <q-icon name="sym_o_database" class="text-secondary" />
+                        當前資料庫資訊
+                    </h5>
+                </div>
+                <div class="card-content">
+                    <div class="info-grid">
+                        <div class="info-item" v-if="databaseInfo">
+                            <q-icon name="sym_o_storage" class="info-icon" />
+                            <div class="info-content">
+                                <span class="info-label">資料庫類型</span>
+                                <span class="info-value">{{ databaseInfo.type || '未知' }}</span>
+                            </div>
+                        </div>
+                        <div class="info-item" v-if="databaseInfo">
+                            <q-icon name="sym_o_storage" class="info-icon" />
+                            <div class="info-content">
+                                <span class="info-label">當前大小</span>
+                                <span class="info-value">{{ databaseInfo.sizeBytes ? (databaseInfo.sizeBytes / 1024 /
+                                    1024).toFixed(2) + ' MB' : '計算中...' }}</span>
+                            </div>
+                        </div>
+                        <div class="info-item" v-if="databaseInfo && databaseInfo.version">
+                            <q-icon name="sym_o_info" class="info-icon" />
+                            <div class="info-content">
+                                <span class="info-label">資料庫版本</span>
+                                <span class="info-value">{{ databaseInfo.version }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </l-card>
+
+            <!-- 安全警告 -->
+            <l-alert type="negative" class="security-alert">
+                <template #prefix>
+                    <q-icon name="sym_o_warning" />
+                </template>
+                <strong>重要警告：</strong>還原資料庫將會完全覆蓋現有資料，此操作無法復原。建議在還原前先進行當前資料庫的備份。
+            </l-alert>
+
+            <!-- 檔案上傳區域 -->
+            <l-card class="upload-card">
+                <div class="card-header">
+                    <h5 class="card-title">
+                        <q-icon name="sym_o_upload" class="text-primary" />
+                        選擇備份檔案
+                    </h5>
+                </div>
+                <div class="card-content">
+                    <div class="upload-area" :class="{ 'has-file': selectedFile }">
+                        <input ref="fileInput" type="file" accept=".sql,application/sql" @change="onFileChange"
+                            class="file-input" id="sql-file-input" />
+
+                        <div v-if="!selectedFile" class="upload-placeholder">
+                            <q-icon name="sym_o_cloud_upload" class="upload-icon" />
+                            <p class="upload-text">點擊選擇 SQL 檔案</p>
+                            <p class="upload-hint">支援 .sql 格式的檔案</p>
+                            <label for="sql-file-input" class="upload-button">
+                                <l-btn label="選擇檔案" icon="sym_o_folder_open" color="primary" />
+                            </label>
+                        </div>
+
+                        <div v-else class="file-info">
+                            <div class="file-details">
+                                <q-icon name="sym_o_description" class="file-icon" />
+                                <div class="file-content">
+                                    <span class="file-name">{{ selectedFile.name }}</span>
+                                    <span class="file-size">{{ formatFileSize(selectedFile.size) }}</span>
+                                </div>
+                            </div>
+                            <l-btn icon="sym_o_close" color="negative" flat round @click="clearFile"
+                                class="remove-btn" />
+                        </div>
+                    </div>
+                </div>
+            </l-card>
+
+            <!-- 還原按鈕區域 -->
+            <div class="restore-section">
+                <l-btn :label="isUploading ? '正在還原中...' : '開始還原資料庫'" icon="sym_o_restore" color="primary" size="lg"
+                    :loading="isUploading" :disabled="isUploading || !selectedFile" @click="onClickRestore"
+                    class="restore-btn" />
+                <p class="restore-hint">
+                    請確認已備份當前資料庫，還原操作將無法復原
+                </p>
+            </div>
+        </div>
+    </l-page>
 </template>
 
 <style scoped>