rayyy-vue-table-components 1.2.16 → 1.2.18

package/dist/src/components/index.d.ts

@@ -5,16 +5,18 @@ export { default as FilterBtn } from './items/FilterBtn.vue';
 export { default as BaseDialog } from './BaseDialog.vue';
 export { default as BaseForm } from './BaseForm.vue';
 export { default as SortTable } from './tables/SortTable.vue';
-export { default as SearchBar } from './SearchBar.vue';
+export { default as SearchBar } from './items/SearchBar.vue';
 export { default as TransferDialog } from './transfer/TransferDialog.vue';
 export { default as TransferItem } from './transfer/transferItem.vue';
-export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, PluginOptions, VueTableComponentsPlugin } from '../types/components';
+export { default as FunctionHeader } from './items/FunctionHeader.vue';
+export { default as MainPanel } from './items/MainPanel.vue';
+export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, PluginOptions, VueTableComponentsPlugin, } from '../types/components';
 export type { default as BaseTableType } from './tables/BaseTable.vue';
 export type { default as BaseBtnType } from './items/BaseBtn.vue';
 export type { default as BaseInputType } from './items/BaseInput.vue';
 export type { default as FilterBtnType } from './items/FilterBtn.vue';
 export type { default as BaseDialogType } from './BaseDialog.vue';
 export type { default as SortTableType } from './tables/SortTable.vue';
-export type { default as SearchBarType } from './SearchBar.vue';
+export type { default as SearchBarType } from './items/SearchBar.vue';
 export type { default as TransferDialogType } from './transfer/TransferDialog.vue';
 export type { default as TransferItemType } from './transfer/transferItem.vue';

package/dist/src/components/items/FilterBtn.vue.d.ts

@@ -4,13 +4,21 @@ type __VLS_Props = {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        'fill-filter'?(_: {}): any;
+        'filter-icon'?(_: {}): any;
         default?(_: {}): any;
     };
     refs: {};
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:reset": () => any;
+    "update:submit": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:reset"?: (() => any) | undefined;
+    "onUpdate:submit"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/src/components/items/FunctionHeader.vue.d.ts

@@ -0,0 +1,53 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    showBack: {
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor)[];
+        required: false;
+        default: boolean;
+    };
+    depth: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    showBack: {
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor)[];
+        required: false;
+        default: boolean;
+    };
+    depth: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    showBack: string | boolean | Record<string, any>;
+    depth: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/items/MainPanel.vue.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    title?: string;
+    showBack?: boolean | string | object;
+    depth?: number;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        searchBar?(_: {}): any;
+        main?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    showBack: boolean | string | object;
+    depth: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/{SearchBar.vue.d.ts → items/SearchBar.vue.d.ts}

@@ -17,9 +17,11 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "keydown:enter": (data: string) => any;
     "update:clear": () => any;
+    "update:resetFilter": () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onKeydown:enter"?: ((data: string) => any) | undefined;
     "onUpdate:clear"?: (() => any) | undefined;
+    "onUpdate:resetFilter"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/src/const/tableConst.d.ts

@@ -0,0 +1,83 @@
+export declare const NAVIGATION_ITEMS: readonly [{
+    readonly id: "transfer-dialog";
+    readonly title: "TransferDialog 示範";
+    readonly description: "表格列配置功能";
+    readonly icon: "⚙️";
+    readonly section: "transfer-demo";
+}, {
+    readonly id: "sort-table";
+    readonly title: "排序表格示範";
+    readonly description: "排序和選擇功能";
+    readonly icon: "📊";
+    readonly section: "sort-table-demo";
+}, {
+    readonly id: "search-bar";
+    readonly title: "搜尋欄示範";
+    readonly description: "搜尋和篩選功能";
+    readonly icon: "🔍";
+    readonly section: "search-bar-demo";
+}, {
+    readonly id: "buttons-dialogs";
+    readonly title: "按鈕和對話框示範";
+    readonly description: "基礎組件展示";
+    readonly icon: "🎯";
+    readonly section: "buttons-dialogs-demo";
+}];
+export declare const DEMO_CONSTANTS: {
+    readonly LOADING_DURATION: 2000;
+    readonly STATUS_CONFIG: {
+        readonly active: {
+            readonly icon: "●";
+            readonly text: "啟用";
+            readonly class: "text-green-500 text-lg";
+        };
+        readonly inactive: {
+            readonly icon: "●";
+            readonly text: "停用";
+            readonly class: "text-red-500 text-lg";
+        };
+        readonly pending: {
+            readonly icon: "○";
+            readonly text: "待處理";
+            readonly class: "text-yellow-500 text-lg";
+        };
+    };
+};
+export type UserStatus = 'active' | 'inactive' | 'pending';
+export interface User extends Record<string, unknown> {
+    id: number;
+    name: string;
+    email: string;
+    age: number;
+    department: string;
+    salary: number;
+    status: UserStatus;
+    joinDate: string;
+}
+export declare const DEMO_USER_DATA: User[];
+export declare const DEPARTMENT_OPTIONS: readonly [{
+    readonly label: "全部";
+    readonly value: "";
+}, {
+    readonly label: "工程部";
+    readonly value: "engineering";
+}, {
+    readonly label: "設計部";
+    readonly value: "design";
+}, {
+    readonly label: "行銷部";
+    readonly value: "marketing";
+}];
+export declare const STATUS_OPTIONS: readonly [{
+    readonly label: "全部";
+    readonly value: "";
+}, {
+    readonly label: "啟用";
+    readonly value: "active";
+}, {
+    readonly label: "停用";
+    readonly value: "inactive";
+}, {
+    readonly label: "待處理";
+    readonly value: "pending";
+}];

package/dist/src/index.d.ts

@@ -5,7 +5,7 @@ import { default as BaseInput } from './components/items/BaseInput.vue';
 import { default as FilterBtn } from './components/items/FilterBtn.vue';
 import { default as BaseDialog } from './components/BaseDialog.vue';
 import { default as SortTable } from './components/tables/SortTable.vue';
-import { default as SearchBar } from './components/SearchBar.vue';
+import { default as SearchBar } from './components/items/SearchBar.vue';
 export * from './types';
 export * from './utils/tableHelper';
 export * from './utils/tableStyles';

package/dist/src/types/components.d.ts

@@ -206,5 +206,6 @@ declare module '@vue/runtime-core' {
     BaseTable: typeof BaseTable
     BaseBtn: typeof BaseBtn
     BaseDialog: typeof BaseDialog
+    FilterBtn: typeof FilterBtn
   }
 }

package/dist/src/utils/routeFormatters.d.ts

@@ -0,0 +1 @@
+export declare function extractSubRoutes(path: string, layer?: number): string;

package/dist/src/utils/tableStyles.d.ts

@@ -1,100 +1,58 @@
 /**
  * Table 樣式工具類
- * 將原本的 SCSS 樣式轉換為 Tailwind CSS 類名
+ * 注意：樣式定義已移至 src/assets/styles/_components.scss
+ * 此檔案僅保留工具函數和類型定義
  */
-export declare const tableCell = "p-0 h-10";
-export declare const tableHeader = "bg-primary-15 font-bold text-text text-sm leading-4";
-export declare const tableCellContent = "truncate";
-export declare const dismissedRow = "bg-blue-20";
-export declare const tableFooter = "font-bold";
-export declare const blueText = "text-blue-10";
-export declare const redText = "text-redText";
-export declare const sortTableContainer = "w-full mb-4";
-export declare const sortTableFunctionBar = "flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end";
-export declare const sortTableSettingsBtn = "cursor-pointer text-primary-dark text-xl flex items-center justify-center hover:text-primary-40";
-export declare const filterBtn = "text-sky-500 hover:text-white hover:bg-sky-500 disabled:bg-white disabled:opacity-50";
-export declare const filterBtnText = "text-black ml-2 font-bold hover:text-white disabled:text-black/20";
-export declare const filterBtnIcon = "text-xl";
-export declare const transferSortWrapper = "border border-gray-200 h-96 overflow-auto";
-export declare const transferActiveBg = "bg-primary/10";
-export declare const transferActiveBorder = "border border-primary-10 rounded";
-export declare const transferItemWrapper = "border-t border-gray-200 px-4 flex items-center justify-between w-full";
-export declare const transferArrowWrapper = "w-28 text-primary-10";
-export declare const baseDialogTitle = "font-bold text-base";
-export declare const cursorGrab = "cursor-grab";
-export declare const cursorGrabbing = "cursor-grabbing";
-export declare const tableStyles: {
-    readonly cell: "p-0 h-10";
-    readonly header: "bg-primary-15 font-bold text-text text-sm leading-4";
-    readonly content: "truncate";
-    readonly dismissed: "bg-blue-20";
-    readonly footer: "font-bold";
-    readonly blueText: "text-blue-10";
-    readonly redText: "text-redText";
-};
-export declare const componentStyles: {
-    readonly sortTableContainer: "w-full mb-4";
-    readonly sortTableFunctionBar: "flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end";
-    readonly sortTableSettingsBtn: "cursor-pointer text-primary-dark text-xl flex items-center justify-center hover:text-primary-40";
-    readonly filterBtn: "text-sky-500 hover:text-white hover:bg-sky-500 disabled:bg-white disabled:opacity-50";
-    readonly filterBtnText: "text-black ml-2 font-bold hover:text-white disabled:text-black/20";
-    readonly filterBtnIcon: "text-xl";
-    readonly transferSortWrapper: "border border-gray-200 h-96 overflow-auto";
-    readonly transferActiveBg: "bg-primary/10";
-    readonly transferActiveBorder: "border border-primary-10 rounded";
-    readonly transferItemWrapper: "border-t border-gray-200 px-4 flex items-center justify-between w-full";
-    readonly transferArrowWrapper: "w-28 text-primary-10";
-    readonly baseDialogTitle: "font-bold text-base";
-    readonly cursorGrab: "cursor-grab";
-    readonly cursorGrabbing: "cursor-grabbing";
-};
-export declare const dataTableConfig: {
-    readonly cellClass: "p-0 h-10";
-    readonly headerClass: "bg-primary-15 font-bold text-text text-sm leading-4";
-    readonly contentClass: "truncate";
-    readonly dismissedClass: "bg-blue-20";
-    readonly footerClass: "font-bold";
-    readonly blueTextClass: "text-blue-10";
-    readonly redTextClass: "text-redText";
-};
-export declare const allComponentStyles: {
-    readonly dataTableConfig: {
-        readonly cellClass: "p-0 h-10";
-        readonly headerClass: "bg-primary-15 font-bold text-text text-sm leading-4";
-        readonly contentClass: "truncate";
-        readonly dismissedClass: "bg-blue-20";
-        readonly footerClass: "font-bold";
-        readonly blueTextClass: "text-blue-10";
-        readonly redTextClass: "text-redText";
-    };
-    readonly sortTableContainer: "w-full mb-4";
-    readonly sortTableFunctionBar: "flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end";
-    readonly sortTableSettingsBtn: "cursor-pointer text-primary-dark text-xl flex items-center justify-center hover:text-primary-40";
-    readonly filterBtn: "text-sky-500 hover:text-white hover:bg-sky-500 disabled:bg-white disabled:opacity-50";
-    readonly filterBtnText: "text-black ml-2 font-bold hover:text-white disabled:text-black/20";
-    readonly filterBtnIcon: "text-xl";
-    readonly transferSortWrapper: "border border-gray-200 h-96 overflow-auto";
-    readonly transferActiveBg: "bg-primary/10";
-    readonly transferActiveBorder: "border border-primary-10 rounded";
-    readonly transferItemWrapper: "border-t border-gray-200 px-4 flex items-center justify-between w-full";
-    readonly transferArrowWrapper: "w-28 text-primary-10";
-    readonly baseDialogTitle: "font-bold text-base";
-    readonly cursorGrab: "cursor-grab";
-    readonly cursorGrabbing: "cursor-grabbing";
-    readonly cell: "p-0 h-10";
-    readonly header: "bg-primary-15 font-bold text-text text-sm leading-4";
-    readonly content: "truncate";
-    readonly dismissed: "bg-blue-20";
-    readonly footer: "font-bold";
-    readonly blueText: "text-blue-10";
-    readonly redText: "text-redText";
-};
 export declare const createTableCellClass: (options?: {
     isDismissed?: boolean;
     isHeader?: boolean;
 }) => string;
 export declare const createTextClass: (type?: "blue" | "red" | "normal") => "" | "text-blue-10" | "text-redText";
-export type TableStylesType = typeof tableStyles;
-export type ComponentStylesType = typeof componentStyles;
-export type DataTableConfigType = typeof dataTableConfig;
-export type AllComponentStylesType = typeof allComponentStyles;
+export declare const STYLE_CLASSES: {
+    readonly tableCell: "table-cell";
+    readonly tableHeader: "table-header";
+    readonly tableCellContent: "table-cell-content";
+    readonly dismissedRow: "dismissed-row";
+    readonly tableFooter: "table-footer";
+    readonly blueText: "blue-text";
+    readonly redText: "red-text";
+    readonly sortTableContainer: "sort-table-container";
+    readonly sortTableFunctionBar: "sort-table-function-bar";
+    readonly sortTableSettingsBtn: "sort-table-settings-btn";
+    readonly filterBtn: "filter-btn";
+    readonly filterBtnText: "filter-btn-text";
+    readonly filterBtnIcon: "filter-btn-icon";
+    readonly transferSortWrapper: "transfer-sort-wrapper";
+    readonly transferActiveBg: "transfer-active-bg";
+    readonly transferActiveBorder: "transfer-active-border";
+    readonly transferItemWrapper: "transfer-item-wrapper";
+    readonly transferArrowWrapper: "transfer-arrow-wrapper";
+    readonly baseDialogTitle: "base-dialog-title";
+    readonly cursorGrab: "cursor-grab";
+    readonly cursorGrabbing: "cursor-grabbing";
+    readonly dataTableConfig: "data-table-config";
+    readonly componentStyles: "component-styles";
+};
+export type StyleClassesType = typeof STYLE_CLASSES;
+export interface TableCellStyleOptions {
+    isDismissed?: boolean;
+    isHeader?: boolean;
+}
+export type TextStyleType = 'blue' | 'red' | 'normal';
+/**
+ * 使用方式：
+ *
+ * 1. 在 Vue 組件中使用樣式類名：
+ *    <div :class="STYLE_CLASSES.tableCell">內容</div>
+ *
+ * 2. 使用樣式組合函數：
+ *    <div :class="createTableCellClass({ isHeader: true })">標題</div>
+ *
+ * 3. 使用文字樣式函數：
+ *    <span :class="createTextClass('blue')">藍色文字</span>
+ *
+ * 4. 在 SCSS 中使用對應的類名：
+ *    .my-custom-class {
+ *      @extend .table-cell;
+ *    }
+ */

package/dist/src/views/DemoPage.vue.d.ts

@@ -1,2 +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, {}, HTMLDivElement>;
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",

package/src/assets/styles/_base.scss

@@ -0,0 +1,45 @@
+// ==================== 基礎樣式 ====================
+// 包含表格基礎樣式、文字樣式等通用樣式
+
+// 表格基礎樣式
+.table-cell {
+  @apply p-0 h-10;
+}
+
+// 表格標題樣式
+.table-header {
+  @apply bg-primary-15 font-bold text-text text-sm leading-4;
+}
+
+// 表格內容樣式
+.table-cell-content {
+  @apply truncate;
+}
+
+// 被駁回行的樣式
+.dismissed-row {
+  @apply bg-blue-20;
+}
+
+// 表格底部樣式
+.table-footer {
+  @apply font-bold;
+}
+
+// 文字顏色樣式
+.blue-text {
+  @apply text-blue-10;
+}
+
+.red-text {
+  @apply text-redText;
+}
+
+// 通用樣式
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-grabbing {
+  cursor: grabbing;
+}

package/src/assets/styles/_components.scss

@@ -1,6 +1,7 @@
-// 組件級樣式 - 從 tailwind-preset.js plugins 轉移而來
+// ==================== 組件樣式 ====================
+// 包含各個 Vue 組件的樣式定義
 
-// SortTable 組件樣式
+// ==================== SortTable 組件樣式 ====================
 .sort-table-container {
   @apply w-full mb-4;
 }
@@ -17,7 +18,7 @@
   }
 }
 
-// FilterBtn 組件樣式
+// ==================== FilterBtn 組件樣式 ====================
 .filter-btn {
   @apply text-sky-500;
 
@@ -28,21 +29,26 @@
   i {
     @apply text-xl;
   }
+
   .filter-icon {
     @apply w-5 h-5 stroke-primary;
   }
 
+
+
   &:hover {
     @apply text-white bg-sky-500;
 
     p {
       @apply text-white;
     }
+
     .filter-icon {
-      @apply  stroke-white;
+      @apply stroke-white;
     }
+
     .fill-icon path {
-      @apply stroke-white;
+      @apply stroke-white ;
     }
   }
 
@@ -59,7 +65,7 @@
   }
 }
 
-// TransferItem 組件樣式
+// ==================== TransferItem 組件樣式 ====================
 .transfer-item-wrapper {
   @apply border-t border-gray-200 px-4 flex items-center justify-between w-full;
 }
@@ -68,7 +74,7 @@
   @apply w-28 text-primary-10;
 }
 
-// TransferDialog 組件樣式
+// ==================== TransferDialog 組件樣式 ====================
 .transfer-sort-wrapper {
   @apply border border-gray-200 h-96 overflow-auto;
 }
@@ -81,16 +87,54 @@
   @apply border border-primary-10 rounded;
 }
 
-// BaseDialog 組件樣式
-.base-dialog-title {
-  @apply font-bold text-base;
-}
+// ==================== 組件樣式配置 ====================
+.component-styles {
+  // SortTable
+  .sort-table-container {
+    @apply w-full mb-4;
+  }
 
-// 通用樣式
-.cursor-grab {
-  cursor: grab;
-}
+  .sort-table-function-bar {
+    @apply flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end;
+  }
+
+  .sort-table-settings-btn {
+    @apply cursor-pointer text-primary-dark text-xl flex items-center justify-center;
+  }
+
+  // FilterBtn
+  .filter-btn {
+    @apply text-sky-500;
+  }
+
+  .filter-btn-text {
+    @apply text-primary-80 ml-2 text-base font-bold;
+  }
+
+  .filter-btn-icon {
+    @apply text-xl;
+  }
+
+  // TransferDialog
+  .transfer-sort-wrapper {
+    @apply border border-gray-200 h-96 overflow-auto;
+  }
+
+  .transfer-active-bg {
+    background-color: rgba(103, 133, 193, 0.1);
+  }
+
+  .transfer-active-border {
+    @apply border border-primary-10 rounded;
+  }
+
+  // TransferItem
+  .transfer-item-wrapper {
+    @apply border-t border-gray-200 px-4 flex items-center justify-between w-full;
+  }
+
+  .transfer-arrow-wrapper {
+    @apply w-28 text-primary-10;
+  }
 
-.cursor-grabbing {
-  cursor: grabbing;
 }

package/src/assets/styles/{_dialog.scss → _dialogs.scss}

@@ -1,5 +1,14 @@
+// ==================== 對話框相關樣式 ====================
+// 包含 BaseDialog 組件樣式和 Element Plus 對話框樣式覆蓋
+
+// BaseDialog 組件樣式
+.base-dialog-title {
+  @apply font-bold text-base;
+}
+
+// Element Plus 對話框樣式覆蓋
 .el-dialog.base-dialog {
-  @apply p-0 #{!important};
+  @apply p-0;
 
   .el-dialog__header {
     @apply h-12 pt-2 bg-primary-15 border-b;
@@ -24,20 +33,24 @@
   }
 }
 
+// 警告對話框樣式
 .waring-dialog {
   .el-dialog__header {
     @apply border-b-orange;
   }
 }
 
+// 上傳結果對話框樣式
 .upload-result-dialog {
   .el-dialog__header {
     @apply border-b-blue-10;
   }
 }
 
+// 上下文包裝器樣式
 .context-wrapper {
   @apply w-full flex items-center justify-center flex-col gap-2;
+
   p {
     @apply font-bold text-xl;
   }