koishi-plugin-media-luna 0.0.3 → 0.0.5

package/client/components/HistoryGallery.vue

@@ -292,15 +292,20 @@ onUnmounted(() => {
 <style scoped>
 .history-gallery {
   width: 240px;
-  max-height: 100%;
   flex-shrink: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   background-color: var(--k-card-bg);
   border-radius: 12px;
   border: 1px solid var(--k-color-border);
   overflow: hidden;
-  transition: width 0.3s ease;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.history-gallery:not(.collapsed):hover {
+  border-color: var(--k-color-active);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 
 .history-gallery.collapsed {
@@ -401,13 +406,20 @@ onUnmounted(() => {
 
 /* 任务列表 */
 .gallery-list {
-  flex: 1 1 auto;
-  max-height: calc(100vh - 200px);
+  flex: 1 1 0;
+  min-height: 0;
   overflow-y: auto;
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  /* 隐藏式滚动条 */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.gallery-list:hover {
+  scrollbar-color: var(--k-color-border) transparent;
 }
 
 .gallery-list::-webkit-scrollbar {
@@ -419,8 +431,13 @@ onUnmounted(() => {
 }
 
 .gallery-list::-webkit-scrollbar-thumb {
-  background-color: var(--k-color-border);
+  background-color: transparent;
   border-radius: 2px;
+  transition: background-color 0.2s;
+}
+
+.gallery-list:hover::-webkit-scrollbar-thumb {
+  background-color: var(--k-color-border);
 }
 
 /* 任务卡片 */
@@ -431,6 +448,7 @@ onUnmounted(() => {
   overflow: hidden;
   transition: all 0.2s;
   position: relative;
+  border: 1px solid var(--k-color-border);
 }
 
 .task-card.clickable {
@@ -440,6 +458,19 @@ onUnmounted(() => {
 .task-card.clickable:hover {
   background-color: var(--k-color-bg-1);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-color: var(--k-color-active);
+}
+
+/* 处理中状态的卡片 */
+.task-card:has(.task-processing) {
+  border-color: var(--k-color-warning, #e6a23c);
+  background-color: rgba(230, 162, 60, 0.05);
+}
+
+/* 失败状态的卡片 */
+.task-card:has(.task-failed) {
+  border-color: var(--k-color-error, #f56c6c);
+  background-color: rgba(245, 108, 108, 0.05);
 }
 
 /* 图片区域 - 单张图片，完整显示不裁剪 */
@@ -473,6 +504,7 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
+  background: linear-gradient(135deg, rgba(230, 162, 60, 0.08) 0%, rgba(230, 162, 60, 0.02) 100%);
 }
 
 .processing-animation {
@@ -481,9 +513,9 @@ onUnmounted(() => {
 }
 
 .processing-animation .dot {
-  width: 6px;
-  height: 6px;
-  background-color: var(--k-color-active);
+  width: 8px;
+  height: 8px;
+  background-color: var(--k-color-warning, #e6a23c);
   border-radius: 50%;
   animation: bounce 1.4s ease-in-out infinite both;
 }
@@ -498,7 +530,8 @@ onUnmounted(() => {
 
 .processing-text {
   font-size: 0.75rem;
-  color: var(--k-color-text-description);
+  color: var(--k-color-warning, #e6a23c);
+  font-weight: 500;
 }
 
 /* 失败状态 */
@@ -508,16 +541,18 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
-  color: var(--k-color-error);
+  color: var(--k-color-error, #f56c6c);
+  background: linear-gradient(135deg, rgba(245, 108, 108, 0.08) 0%, rgba(245, 108, 108, 0.02) 100%);
 }
 
 .failed-icon {
-  font-size: 1.25rem;
-  opacity: 0.7;
+  font-size: 1.5rem;
+  opacity: 0.8;
 }
 
 .task-failed span {
   font-size: 0.75rem;
+  font-weight: 500;
 }
 
 /* 任务信息 */

package/client/components/PresetsView.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="view-container">
-    <div class="view-header">
-      <div class="header-left">
+  <div class="ml-view-container">
+    <div class="ml-view-header">
+      <div class="ml-header-left">
         <k-button solid type="primary" @click="openCreateDialog">
           <template #icon><k-icon name="add"></k-icon></template>
           新建预设
@@ -12,19 +12,19 @@
           :preset-tags="presetTags"
         />
       </div>
-      <div class="header-right">
+      <div class="ml-header-right">
         <ViewModeSwitch v-model="viewMode" />
       </div>
     </div>
 
-    <div class="view-content">
+    <div class="ml-view-content">
       <div v-if="loading" class="loading-state">
-        <k-icon name="sync" class="loading-icon"></k-icon> 加载中...
+        <k-icon name="sync" class="ml-spin"></k-icon> 加载中...
       </div>
 
       <!-- 卡片视图 (瀑布流) -->
-      <div v-else-if="viewMode === 'card'" class="masonry-grid">
-        <div v-for="preset in filteredPresets" :key="preset.id" class="masonry-item">
+      <div v-else-if="viewMode === 'card'" class="ml-masonry">
+        <div v-for="preset in filteredPresets" :key="preset.id" class="ml-masonry-item">
           <div class="preset-card" @click="openEditDialog(preset)">
             <!-- 缩略图 -->
             <div class="card-thumbnail" v-if="preset.thumbnail">
@@ -57,14 +57,14 @@
                 size="small"
                 @change="toggleEnable(preset)"
               />
-              <k-button size="mini" class="copy-btn" @click="copyPreset(preset)">
+              <k-button size="mini" class="ml-btn-outline-primary" @click="copyPreset(preset)">
                 <template #icon><k-icon name="copy"></k-icon></template>
                 复制
               </k-button>
               <k-button
                 v-if="preset.source === 'user'"
                 size="mini"
-                class="delete-btn"
+                class="ml-btn-outline-danger"
                 @click="confirmDelete(preset)"
               >
                 <template #icon><k-icon name="delete"></k-icon></template>
@@ -81,8 +81,8 @@
       </div>
 
       <!-- 列表视图 -->
-      <div v-else class="list-view">
-        <table class="preset-table">
+      <div v-else class="ml-table-container">
+        <table class="ml-table">
           <thead>
             <tr>
               <th class="col-thumb">缩略图</th>
@@ -98,7 +98,6 @@
             <tr
               v-for="preset in filteredPresets"
               :key="preset.id"
-              class="preset-row"
               @click="openEditDialog(preset)"
             >
               <td class="col-thumb">
@@ -132,14 +131,14 @@
               </td>
               <td class="col-actions" @click.stop>
                 <div class="action-btns">
-                  <k-button size="mini" class="copy-btn" @click="copyPreset(preset)">
+                  <k-button size="mini" class="ml-btn-outline-primary" @click="copyPreset(preset)">
                     <template #icon><k-icon name="copy"></k-icon></template>
                     复制
                   </k-button>
                   <k-button
                     v-if="preset.source === 'user'"
                     size="mini"
-                    class="delete-btn"
+                    class="ml-btn-outline-danger"
                     @click="confirmDelete(preset)"
                   >
                     <template #icon><k-icon name="delete"></k-icon></template>
@@ -381,68 +380,9 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.view-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.view-header {
-  flex-shrink: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-/* 内容区域 */
-.view-content {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 0.5rem 0;
-}
-
-/* 瀑布流布局 */
-.masonry-grid {
-  columns: 5;
-  column-gap: 1rem;
-}
-
-@media (max-width: 1400px) {
-  .masonry-grid { columns: 4; }
-}
-@media (max-width: 1100px) {
-  .masonry-grid { columns: 3; }
-}
-@media (max-width: 800px) {
-  .masonry-grid { columns: 2; }
-}
-@media (max-width: 500px) {
-  .masonry-grid { columns: 1; }
-}
+@import '../styles/shared.css';
 
-.masonry-item {
-  break-inside: avoid;
-  margin-bottom: 1rem;
-}
+/* ========== 预设卡片特有样式 ========== */
 
 .preset-card {
   background-color: var(--k-color-bg-1);
@@ -571,92 +511,18 @@ onMounted(() => {
   color: white;
 }
 
-/* 列表视图 - 表格样式 */
-.list-view {
-  background-color: var(--k-card-bg);
-  border: 1px solid var(--k-color-border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.preset-table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-.preset-table thead {
-  background-color: var(--k-color-bg-2);
-}
-
-.preset-table th {
-  padding: 0.875rem 1rem;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--k-color-text-description);
-  text-align: left;
-  border-bottom: 1px solid var(--k-color-border);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.preset-table .preset-row {
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.preset-table .preset-row:hover {
-  background-color: var(--k-color-bg-1);
-}
-
-.preset-table .preset-row td {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--k-color-border);
-  vertical-align: middle;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.preset-table .preset-row:last-child td {
-  border-bottom: none;
-}
+/* ========== 列表视图特有样式 ========== */
 
 /* 表格列宽定义 */
-.preset-table .col-thumb {
-  width: 60px;
-}
-
-.preset-table .col-name {
-  width: 15%;
-}
+.col-thumb { width: 60px; }
+.col-name { width: 15%; }
+.col-template { width: auto; }
+.col-refs { width: 10%; text-align: center !important; }
+.col-source { width: 10%; }
+.col-status { width: 8%; }
+.col-actions { width: 15%; }
 
-.preset-table .col-template {
-  width: auto;
-}
-
-.preset-table .col-refs {
-  width: 10%;
-  text-align: center !important;
-}
-
-.preset-table th.col-refs {
-  text-align: center !important;
-}
-
-.preset-table .col-source {
-  width: 10%;
-}
-
-.preset-table .col-status {
-  width: 8%;
-}
-
-.preset-table .col-actions {
-  width: 15%;
-}
+th.col-refs { text-align: center !important; }
 
 .thumb-wrapper {
   width: 40px;
@@ -672,7 +538,7 @@ onMounted(() => {
   object-fit: cover;
 }
 
-.preset-table .name-text {
+.name-text {
   font-weight: 600;
   color: var(--k-color-text);
   display: block;
@@ -706,15 +572,6 @@ onMounted(() => {
   gap: 0.5rem;
 }
 
-.loading-icon {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
 /* 表单样式 */
 .form-tip {
   font-size: 0.8rem;
@@ -722,32 +579,6 @@ onMounted(() => {
   margin-top: 0.25rem;
 }
 
-.ref-image-input {
-  margin-bottom: 8px;
-}
-
-/* 复制按钮样式 */
-.copy-btn {
-  color: var(--k-color-active) !important;
-  border-color: var(--k-color-active) !important;
-}
-
-.copy-btn:hover {
-  background-color: var(--k-color-active) !important;
-  color: white !important;
-}
-
-/* 删除按钮样式 */
-.delete-btn {
-  color: var(--k-color-error, #f56c6c) !important;
-  border-color: var(--k-color-error, #f56c6c) !important;
-}
-
-.delete-btn:hover {
-  background-color: var(--k-color-error, #f56c6c) !important;
-  color: white !important;
-}
-
 /* 表格内元素样式 */
 .thumb-placeholder {
   width: 44px;
@@ -760,11 +591,6 @@ onMounted(() => {
   color: var(--k-color-text-description);
 }
 
-.name-text {
-  font-weight: 500;
-  color: var(--k-color-text);
-}
-
 .source-badge {
   display: inline-block;
   font-size: 0.75rem;

package/client/components/SettingsView.vue

@@ -180,6 +180,32 @@ onMounted(async () => {
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
+  /* 隐藏式滚动条 */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.main-content:hover {
+  scrollbar-color: var(--k-color-border) transparent;
+}
+
+/* Webkit 隐藏式滚动条 */
+.main-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.main-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.main-content::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 3px;
+  transition: background-color 0.2s;
+}
+
+.main-content:hover::-webkit-scrollbar-thumb {
+  background-color: var(--k-color-border);
 }
 
 .loading {

package/client/components/TasksView.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="view-container">
+  <div class="ml-view-container">
     <!-- 固定头部区域 -->
-    <div class="view-header">
-      <div class="header-left">
+    <div class="ml-view-header">
+      <div class="ml-header-left">
         <!-- 视图切换 -->
         <div class="view-mode-switch">
           <button
@@ -32,7 +32,7 @@
           </button>
         </div>
       </div>
-      <div class="header-actions">
+      <div class="ml-header-right">
         <k-button @click="openCleanupDialog">
           <template #icon><k-icon name="delete"></k-icon></template>
           清理记录
@@ -101,7 +101,7 @@
     </div>
 
     <!-- 可滚动的内容区域 -->
-    <div class="view-content">
+    <div class="ml-view-content">
       <!-- 列表视图 -->
       <template v-if="viewMode === 'list'">
         <el-table :data="tasks" style="width: 100%" class="task-table" @row-click="openDetailDialog">
@@ -155,11 +155,11 @@
           <k-icon name="image" class="empty-icon"></k-icon>
           <p>暂无成功生成的图片</p>
         </div>
-        <div v-else class="masonry-grid">
+        <div v-else class="ml-masonry">
           <div
             v-for="item in galleryItems"
             :key="item.id + '-' + item.assetIndex"
-            class="masonry-item"
+            class="ml-masonry-item"
           >
             <div class="gallery-item" @click="openGalleryDetail(item)">
               <div class="gallery-image-wrapper">
@@ -500,34 +500,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.view-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.view-header {
-  flex-shrink: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  padding: 0 0.5rem;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
+@import '../styles/shared.css';
 
-.header-actions {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
+/* ========== 任务视图特有样式 ========== */
 
+/* 视图模式切换 */
 .view-mode-switch {
   display: flex;
   gap: 2px;
@@ -563,13 +540,6 @@ onMounted(() => {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.view-content {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
 /* Stats Grid */
 .stats-grid {
   flex-shrink: 0;
@@ -585,7 +555,7 @@ onMounted(() => {
   border-radius: 16px;
   padding: 1.5rem;
   display: flex;
-  flex-direction: row; /* Layout change: row */
+  flex-direction: row;
   align-items: center;
   justify-content: space-between;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -626,7 +596,7 @@ onMounted(() => {
 .stat-content {
   display: flex;
   flex-direction: column-reverse;
-  align-items: flex-end; /* Align right */
+  align-items: flex-end;
   flex-grow: 1;
   margin-left: 1rem;
 }
@@ -682,7 +652,7 @@ onMounted(() => {
   border-radius: 12px;
   cursor: pointer;
   overflow: hidden;
-  --el-table-header-bg-color: var(--k-color-bg-1); /* Blend with page bg */
+  --el-table-header-bg-color: var(--k-color-bg-1);
   --el-table-row-hover-bg-color: var(--k-color-bg-2);
   --el-table-border-color: var(--k-color-border);
 }
@@ -720,30 +690,7 @@ onMounted(() => {
   color: var(--k-color-text-description);
 }
 
-/* Masonry Gallery */
-.masonry-grid {
-  columns: 5;
-  column-gap: 1rem;
-}
-
-@media (max-width: 1400px) {
-  .masonry-grid { columns: 4; }
-}
-@media (max-width: 1100px) {
-  .masonry-grid { columns: 3; }
-}
-@media (max-width: 800px) {
-  .masonry-grid { columns: 2; }
-}
-@media (max-width: 500px) {
-  .masonry-grid { columns: 1; }
-}
-
-.masonry-item {
-  break-inside: avoid;
-  margin-bottom: 1rem;
-}
-
+/* Gallery Item */
 .gallery-item {
   background: var(--k-card-bg);
   border: 1px solid var(--k-color-border);
@@ -796,7 +743,7 @@ onMounted(() => {
 .zoom-icon {
   font-size: 2rem;
   color: #fff;
-  margin-bottom: auto; /* Push to center/top if needed, or remove to stay bottom */
+  margin-bottom: auto;
   align-self: center;
   opacity: 0;
   transform: scale(0.8);

package/client/composables/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Composables 统一导出
+ */
+export { useLoading } from './useLoading'
+export type { UseLoadingOptions, UseLoadingReturn } from './useLoading'
+
+export { usePagination } from './usePagination'
+export type { UsePaginationOptions, UsePaginationReturn } from './usePagination'
+
+export { useDataFetch } from './useDataFetch'
+export type { UseDataFetchOptions, UseDataFetchReturn } from './useDataFetch'
+
+export { useDialog } from './useDialog'
+export type { UseDialogReturn } from './useDialog'