fdb2 1.0.11 → 1.0.12

package/dist/public/index.css

@@ -1062,10 +1062,38 @@ pre {
 }
 }
 
-.datagrid-inner[data-v-9bff1755] {
+.datagrid-container[data-v-ae552d25] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.datagrid-inner[data-v-ae552d25] {
+    flex: 1;
     overflow: auto;
     margin-bottom: 10px;
 }
-.datagrid-th[data-v-9bff1755] {
+.datagrid-th[data-v-ae552d25] {
     min-width: 80px;
+    white-space: nowrap;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: #f8f9fa;
+}
+.datagrid-th.sortable[data-v-ae552d25] {
+    cursor: pointer;
+    user-select: none;
+}
+.datagrid-th.sortable[data-v-ae552d25]:hover {
+    background-color: #e9ecef;
+}
+.header-content[data-v-ae552d25] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.sort-icon[data-v-ae552d25] {
+    display: flex;
+    align-items: center;
+    font-size: 0.75rem;
 }

package/dist/public/index.js

@@ -12051,8 +12051,8 @@ const _hoisted_7$1 = {
   key: 0,
   class: "error-details-content mt-2"
 };
-const _hoisted_8 = { class: "error-json" };
-const _hoisted_9 = { class: "modal-footer" };
+const _hoisted_8$1 = { class: "error-json" };
+const _hoisted_9$1 = { class: "modal-footer" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -12423,12 +12423,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     _cache[0] || (_cache[0] = createBaseVNode("i", { class: "bi bi-chevron-{{detailsExpanded ? 'up' : 'down'}} ms-1" }, null, -1))
                   ]),
                   detailsExpanded.value ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-                    createBaseVNode("pre", _hoisted_8, toDisplayString(formatErrorDetails()), 1)
+                    createBaseVNode("pre", _hoisted_8$1, toDisplayString(formatErrorDetails()), 1)
                   ])) : createCommentVNode("", true)
                 ])) : createCommentVNode("", true)
               ]))
             ])) : createCommentVNode("", true),
-            createBaseVNode("div", _hoisted_9, [
+            createBaseVNode("div", _hoisted_9$1, [
               _ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", { key: 0 }, void 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 dynamicShowCancel.value || props.closeButton.show ? (openBlock(), createElementBlock("button", {
                   key: 0,
@@ -12563,9 +12563,27 @@ const _hoisted_1 = { class: "datagrid-container" };
 const _hoisted_2 = { class: "datagrid-inner" };
 const _hoisted_3 = { class: "table table-light table-striped table-hover" };
 const _hoisted_4 = { class: "table-light" };
-const _hoisted_5 = { class: "table-group-divider" };
-const _hoisted_6 = ["onClick"];
-const _hoisted_7 = { key: 1 };
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { class: "header-content" };
+const _hoisted_7 = {
+  key: 0,
+  class: "sort-icon"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "bi bi-caret-up-fill"
+};
+const _hoisted_9 = {
+  key: 1,
+  class: "bi bi-caret-down-fill"
+};
+const _hoisted_10 = {
+  key: 2,
+  class: "bi bi-caret-up text-muted opacity-50"
+};
+const _hoisted_11 = { class: "table-group-divider" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -12597,9 +12615,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     columns: {
       type: Array,
       default: []
+    },
+    sortField: {
+      type: String,
+      default: ""
+    },
+    sortOrder: {
+      type: String,
+      default: ""
+      // ASC, DESC, ''
     }
   },
-  emits: ["pageChanged", "rowClicked"],
+  emits: ["pageChanged", "rowClicked", "sortChanged"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
@@ -12613,6 +12640,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function pageChanged(page) {
       emits("pageChanged", page);
     }
+    function handleSort(field) {
+      let order = "ASC";
+      if (props.sortField === field) {
+        if (props.sortOrder === "ASC") {
+          order = "DESC";
+        } else if (props.sortOrder === "DESC") {
+          order = "";
+        }
+      }
+      emits("sortChanged", { field: order ? field : "", order });
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createBaseVNode("div", _hoisted_2, [
@@ -12623,17 +12661,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   return openBlock(), createElementBlock("th", {
                     key: column.name,
                     scope: "col",
-                    class: "datagrid-th",
-                    style: normalizeStyle(column.headerStyle || "")
+                    class: normalizeClass(["datagrid-th", { "sortable": column.sortable !== false }]),
+                    style: normalizeStyle(column.headerStyle || ""),
+                    onClick: ($event) => column.sortable !== false && handleSort(column.name)
                   }, [
                     renderSlot(_ctx.$slots, column.name + "_header", { column }, () => [
-                      createBaseVNode("span", null, toDisplayString(column.text || column.name || ""), 1)
+                      createBaseVNode("div", _hoisted_6, [
+                        createBaseVNode("span", null, toDisplayString(column.text || column.name || ""), 1),
+                        column.sortable !== false ? (openBlock(), createElementBlock("span", _hoisted_7, [
+                          props.sortField === column.name && props.sortOrder === "ASC" ? (openBlock(), createElementBlock("i", _hoisted_8)) : props.sortField === column.name && props.sortOrder === "DESC" ? (openBlock(), createElementBlock("i", _hoisted_9)) : (openBlock(), createElementBlock("i", _hoisted_10))
+                        ])) : createCommentVNode("", true)
+                      ])
                     ])
-                  ], 4);
+                  ], 14, _hoisted_5);
                 }), 128))
               ])
             ]),
-            createBaseVNode("tbody", _hoisted_5, [
+            createBaseVNode("tbody", _hoisted_11, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(props.data, (row, index) => {
                 return openBlock(), createElementBlock("tr", {
                   key: index,
@@ -12648,11 +12692,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         row,
                         column
                       }, () => [
-                        column.component ? (openBlock(), createBlock(resolveDynamicComponent(column.component), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(renderDataItem(row, column)), 1))
+                        column.component ? (openBlock(), createBlock(resolveDynamicComponent(column.component), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(renderDataItem(row, column)), 1))
                       ])
                     ]);
                   }), 128))
-                ], 8, _hoisted_6);
+                ], 8, _hoisted_12);
               }), 128))
             ]),
             createBaseVNode("tfoot", null, [
@@ -12676,7 +12720,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9bff1755"]]);
+const DataGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ae552d25"]]);
 let globalModalInstance = null;
 let modalInstance;
 const modalPlugin = {
@@ -12804,6 +12848,7 @@ app.component("Modal", Modal);
 app.component("DataGrid", DataGrid);
 app.mount("#app");
 export {
+  DataGrid as D,
   Modal as M,
   Toast as T,
   _export_sfc as _,

package/dist/public/vue.js

@@ -2690,6 +2690,23 @@ function renderList(source, renderItem, cache, index) {
   }
   return ret;
 }
+function createSlots(slots, dynamicSlots) {
+  for (let i2 = 0; i2 < dynamicSlots.length; i2++) {
+    const slot = dynamicSlots[i2];
+    if (isArray$1(slot)) {
+      for (let j2 = 0; j2 < slot.length; j2++) {
+        slots[slot[j2].name] = slot[j2].fn;
+      }
+    } else if (slot) {
+      slots[slot.name] = slot.key ? (...args) => {
+        const res = slot.fn(...args);
+        if (res) res.key = slot.key;
+        return res;
+      } : slot.fn;
+    }
+  }
+  return slots;
+}
 function renderSlot(slots, name, props = {}, fallback, noSlotted) {
   if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
     const hasProps = Object.keys(props).length > 0;
@@ -6661,30 +6678,6 @@ const withModifiers = (fn, modifiers) => {
     return fn(event, ...args);
   }));
 };
-const keyNames = {
-  esc: "escape",
-  space: " ",
-  up: "arrow-up",
-  left: "arrow-left",
-  right: "arrow-right",
-  down: "arrow-down",
-  delete: "backspace"
-};
-const withKeys = (fn, modifiers) => {
-  const cache = fn._withKeys || (fn._withKeys = {});
-  const cacheKey = modifiers.join(".");
-  return cache[cacheKey] || (cache[cacheKey] = ((event) => {
-    if (!("key" in event)) {
-      return;
-    }
-    const eventKey = hyphenate(event.key);
-    if (modifiers.some(
-      (k2) => k2 === eventKey || keyNames[k2] === eventKey
-    )) {
-      return fn(event);
-    }
-  }));
-};
 const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
 let renderer;
 function ensureRenderer() {
@@ -9086,7 +9079,7 @@ export {
   vShow as S,
   useRouter as T,
   createStaticVNode as U,
-  withKeys as V,
+  createSlots as V,
   useRoute as W,
   ref as a,
   isRef as b,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fdb2",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "private": false,
   "type": "commonjs",
   "main": "view/index.html",
@@ -45,64 +45,64 @@
   },
   "dependencies": {
     "@fefeding/common": "^1.0.58",
-    "axios": "^1.13.4",
-    "dayjs": "^1.11.19",
+    "axios": "^1.13.6",
+    "better-sqlite3": "^11.10.0",
+    "dayjs": "^1.11.20",
     "express": "^5.2.1",
-    "mysql2": "^3.16.3",
+    "mysql2": "^3.20.0",
     "oracledb": "^6.10.0",
-    "pg": "^8.18.0",
+    "pg": "^8.20.0",
     "reflect-metadata": "^0.2.2",
-    "better-sqlite3": "^11.0.0",
     "typeorm": "^0.3.28"
   },
   "devDependencies": {
-    "@codemirror/commands": "^6.10.1",
+    "@codemirror/commands": "^6.10.3",
     "@codemirror/fold": "^0.19.4",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-sql": "^6.10.0",
-    "@codemirror/language": "^6.12.1",
-    "@codemirror/state": "^6.5.4",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.39.12",
+    "@codemirror/view": "^6.40.0",
     "@fefeding/eventemitter": "^1.0.5",
     "@fefeding/vite-nunjucks-plugin": "^1.0.2",
     "@popperjs/core": "^2.11.8",
     "@rollup/pluginutils": "^5.3.0",
     "@types/bootstrap": "^5.2.10",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^24.10.10",
+    "@types/node": "^24.12.0",
     "@types/vue": "^2.0.0",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vitejs/plugin-vue-jsx": "^5.1.4",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vue/tsconfig": "^0.8.1",
     "@vueuse/core": "^13.9.0",
     "@zumer/snapdom": "^1.9.14",
-    "autoprefixer": "^10.4.24",
+    "autoprefixer": "^10.4.27",
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
     "codemirror": "^6.0.2",
-    "dotenv": "^17.2.3",
+    "dotenv": "^17.3.1",
     "echarts": "^6.0.0",
     "exceljs": "^4.4.0",
     "js-cookie": "^3.0.5",
     "jsdom": "^26.1.0",
     "jszip": "^3.10.1",
     "nw": "^0.107.0",
-    "nw-builder": "^4.17.2",
+    "nw-builder": "^4.17.5",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
-    "postcss": "^8.5.6",
-    "sass": "^1.97.3",
+    "postcss": "^8.5.8",
+    "sass": "^1.98.0",
     "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3",
     "vconsole": "^3.15.1",
     "vite": "latest",
     "vite-plugin-files-copy": "^3.8.0",
     "vitest": "^3.2.4",
-    "vue": "^3.5.27",
+    "vue": "^3.5.31",
     "vue-json-pretty": "^2.6.0",
     "vue-router": "^4.6.4",
-    "vue-tsc": "^3.2.4",
+    "vue-tsc": "^3.2.6",
     "vuex": "^4.1.0",
     "xlsx": "^0.18.5"
   },

package/src/components/dataGrid/index.vue

@@ -4,9 +4,18 @@
     <table class="table table-light table-striped table-hover">
         <thead class="table-light">
             <tr>
-                <th v-for="column in props.columns" :key="column.name" scope="col" class="datagrid-th" :style="column.headerStyle||''" > 
+                <th v-for="column in props.columns" :key="column.name" scope="col" class="datagrid-th" :style="column.headerStyle||''" 
+                    @click="column.sortable !== false && handleSort(column.name)"
+                    :class="{ 'sortable': column.sortable !== false }"> 
                   <slot :name="column.name+'_header'" :column="column">
-                        <span>{{column.text||column.name||''}}</span>
+                        <div class="header-content">
+                            <span>{{column.text||column.name||''}}</span>
+                            <span v-if="column.sortable !== false" class="sort-icon">
+                                <i v-if="props.sortField === column.name && props.sortOrder === 'ASC'" class="bi bi-caret-up-fill"></i>
+                                <i v-else-if="props.sortField === column.name && props.sortOrder === 'DESC'" class="bi bi-caret-down-fill"></i>
+                                <i v-else class="bi bi-caret-up text-muted opacity-50"></i>
+                            </span>
+                        </div>
                     </slot>                    
                 </th>
             </tr>
@@ -43,7 +52,8 @@
     component?: Component;
     headerStyle?: string;
     style?: string;
-    formatter?: (value: any) => string;
+    sortable?: boolean;
+    formatter?: (row: any, column: ColumnType) => string;
   };
   
   const props = defineProps({
@@ -75,10 +85,18 @@
     columns: {
         type: Array<ColumnType>,
         default: []
+    },
+    sortField: {
+        type: String,
+        default: ''
+    },
+    sortOrder: {
+        type: String,
+        default: '' // ASC, DESC, ''
     }
   });
 
-  const emits = defineEmits(['pageChanged', 'rowClicked']);
+  const emits = defineEmits(['pageChanged', 'rowClicked', 'sortChanged']);
 
   function renderDataItem(row: any, column: any) {
     if(typeof column === 'string') return row[column];
@@ -92,14 +110,54 @@
     emits('pageChanged', page);
   }
 
+  function handleSort(field: string) {
+    let order: 'ASC' | 'DESC' | '' = 'ASC';
+    if (props.sortField === field) {
+        if (props.sortOrder === 'ASC') {
+            order = 'DESC';
+        } else if (props.sortOrder === 'DESC') {
+            order = ''; // 取消排序
+        }
+    }
+    emits('sortChanged', { field: order ? field : '', order });
+  }
+
 </script>
   
 <style scoped>
+  .datagrid-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
   .datagrid-inner {
+    flex: 1;
     overflow: auto;
     margin-bottom: 10px;
   }
   .datagrid-th {
     min-width: 80px;
+    white-space: nowrap;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: #f8f9fa;
+  }
+  .datagrid-th.sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .datagrid-th.sortable:hover {
+    background-color: #e9ecef;
+  }
+  .header-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .sort-icon {
+    display: flex;
+    align-items: center;
+    font-size: 0.75rem;
   }
 </style>  

package/src/platform/database/components/database-detail.vue

@@ -122,8 +122,13 @@
                     <i class="bi bi-table"></i>
                   </div>
                   <div class="table-info">
-                    <div class="table-name">{{ table.name }}</div>
-                    <div class="table-engine">{{ table.engine || '-' }}</div>
+                    <div class="table-name-wrapper">
+                      <div class="table-name" :title="table.name">{{ table.name }}</div>
+                      <div class="table-engine">{{ table.engine || '-' }}</div>
+                    </div>
+                    <div class="table-comment-header" v-if="table.comment" :title="table.comment">
+                      {{ table.comment }}
+                    </div>
                   </div>
                 </div>
                 <div class="card-body">
@@ -137,9 +142,6 @@
                         <span class="stat-value">{{ formatSize(table.dataSize) }}</span>
                       </div>
                     </div>
-                    <div class="table-comment" v-if="table.comment">
-                      {{ table.comment }}
-                    </div>
                   <div class="table-actions">
                     <button class="btn btn-sm btn-outline-primary" @click.stop="editTable(table)">
                       <i class="bi bi-pencil"></i>
@@ -998,10 +1000,24 @@ function handleExecuteSQL(sql: string) {
   color: white;
 }
 
+.table-info {
+  flex: 1;
+  min-width: 0; /* 允许子元素截断 */
+}
+
+.table-name-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
 .table-name {
   font-weight: 600;
   color: #1e293b;
-  margin-bottom: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .table-engine {
@@ -1010,6 +1026,15 @@ function handleExecuteSQL(sql: string) {
   background: #f1f5f9;
   padding: 0.125rem 0.375rem;
   border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.table-comment-header {
+  font-size: 0.75rem;
+  color: #64748b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .card-body {