优化卡片组件样式

src/components/cards/MediaCard.vue

@@ -469,10 +469,10 @@ onBeforeUnmount(() => {
             style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
           >
             <span class="font-semibold text-sm">{{ props.media?.year }}</span>
-            <h1 class="mb-1 text-white font-bold text-lg line-clamp-1 overflow-hidden text-ellipsis ...">
+            <h1 class="media-card-title font-bold mb-2 text-white line-clamp-2 overflow-hidden text-ellipsis ...">
               {{ props.media?.title }}
             </h1>
-            <p class="line-clamp-3 overflow-hidden text-sm text-ellipsis ...">
+            <p class="media-card-overview line-clamp-3 overflow-hidden text-ellipsis ...">
               {{ props.media?.overview }}
             </p>
             <div v-if="props.media?.collection_id" class="mb-3" @click.stop=""></div>
@@ -556,3 +556,14 @@ onBeforeUnmount(() => {
     @close="chooseSiteDialog = false"
   />
 </template>
+<style scoped>
+.media-card-title {
+  font-size: 1.125rem;
+  line-height: 1.25rem;
+}
+
+.media-card-overview {
+  font-size: 0.875rem;
+  line-height: 1rem;
+}
+</style>

src/components/cards/WorkflowTaskCard.vue

@@ -190,32 +190,29 @@ const resolveProgress = (item: Workflow) => {
         :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
       >
         <VCardItem
+          class="px-2"
           :class="{
-            'py-1': workflow?.description,
+            'py-0': workflow?.description,
-            'py-3': !workflow?.description,
+            'py-2': !workflow?.description,
             [`bg-${resolveStatusVariant(workflow?.state).color}`]: true,
           }"
         >
           <template #prepend>
-            <VAvatar variant="text" class="me-2">
+            <VAvatar variant="text" size="small">
               <VIcon
                 v-if="workflow?.state === 'P'"
                 color="success"
-                size="x-large"
                 icon="mdi-play"
                 @click.stop="handleEnable(workflow)"
               />
-              <VIcon v-else color="warning" icon="mdi-pause" size="x-large" @click.stop="handlePause(workflow)" />
+              <VIcon v-else color="warning" icon="mdi-pause" @click.stop="handlePause(workflow)" />
             </VAvatar>
           </template>
-          <VCardTitle class="text-white">
+          <VCardTitle class="text-white text-lg">
             {{ workflow?.name }}
           </VCardTitle>
           <VCardSubtitle class="text-white">{{ workflow?.description }}</VCardSubtitle>
           <template #append>
-            <IconBtn>
-              <VIcon icon="mdi-vector-polyline-edit" @click.stop="handleFlow(workflow)" />
-            </IconBtn>
             <IconBtn>
               <VIcon icon="mdi-dots-vertical" />
               <VMenu activator="parent" close-on-content-click>
@@ -226,6 +223,12 @@ const resolveProgress = (item: Workflow) => {
                     </template>
                     <VListItemTitle>{{ t('workflow.task.edit') }}</VListItemTitle>
                   </VListItem>
+                  <VListItem base-color="success" @click="handleFlow(workflow)">
+                    <template #prepend>
+                      <VIcon icon="mdi-vector-polyline" />
+                    </template>
+                    <VListItemTitle>{{ t('workflow.task.editFlow') }}</VListItemTitle>
+                  </VListItem>
                   <VListItem v-if="workflow.current_action" base-color="info" @click="handleRun(workflow, false)">
                     <template #prepend>
                       <VIcon icon="mdi-play-speed" />
@@ -269,34 +272,34 @@ const resolveProgress = (item: Workflow) => {
         </VCardItem>
         <VDivider />
         <VCardText>
-          <div class="d-flex flex-column gap-y-4">
+          <div class="d-flex flex-column gap-y-2">
-            <div class="d-flex flex-wrap gap-x-6">
+            <div class="d-flex flex-wrap gap-x-3">
               <div class="flex-1">
                 <div class="mb-1">{{ t('workflow.task.info.timer') }}</div>
-                <h5 class="text-h6">{{ workflow?.timer }}</h5>
+                <h5 class="text-lg">{{ workflow?.timer }}</h5>
               </div>
               <div class="flex-1">
                 <div class="mb-1">{{ t('workflow.task.info.status') }}</div>
-                <h5 class="text-h6" :class="`text-${resolveStatusVariant(workflow?.state).color}`">
+                <h5 class="text-lg" :class="`text-${resolveStatusVariant(workflow?.state).color}`">
                   {{ resolveStatusVariant(workflow?.state).text }}
                 </h5>
               </div>
             </div>
-            <div class="d-flex flex-wrap gap-x-6">
+            <div class="d-flex flex-wrap gap-x-3">
               <div class="flex-1">
                 <div class="mb-1">{{ t('workflow.task.info.actionCount') }}</div>
                 <div>
-                  <VAvatar size="32" color="primary" variant="tonal">
+                  <VAvatar size="28" color="primary" variant="tonal">
                     <span class="text-sm">{{ workflow?.actions?.length }}</span>
                   </VAvatar>
                 </div>
               </div>
               <div class="flex-1">
                 <div class="mb-1">{{ t('workflow.task.info.runCount') }}</div>
-                <h5 class="text-h6">{{ workflow?.run_count }}</h5>
+                <h5 class="text-lg">{{ workflow?.run_count }}</h5>
               </div>
             </div>
-            <div class="d-flex flex-wrap gap-x-6">
+            <div class="d-flex flex-wrap gap-x-3">
               <div class="flex-1">
                 <div class="mb-1">{{ t('workflow.task.info.progress') }}</div>
                 <div class="d-flex align-center gap-5">
@@ -307,7 +310,7 @@ const resolveProgress = (item: Workflow) => {
                 </div>
               </div>
             </div>
-            <div class="d-flex flex-wrap gap-x-6" v-if="workflow?.result">
+            <div class="d-flex flex-wrap gap-x-3" v-if="workflow?.result">
               <div class="flex-1">
                 <div class="mb-1">{{ t('workflow.task.info.error') }}</div>
                 <div class="text-error">{{ workflow?.result }}</div>

src/components/slide/SlideView.vue

@@ -260,6 +260,7 @@ onActivated(() => {
   inset-block-start: 50%;
   opacity: 0;
   pointer-events: none;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 10%);
   transform: translateY(-50%);
   transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease,
     box-shadow 0.3s ease, border-color 0.3s ease;

src/locales/en-US.ts

@@ -494,6 +494,7 @@ export default {
     dragComponentHint: 'Drag component to canvas',
     task: {
       edit: 'Edit Task',
+      editFlow: 'Edit Flow',
       share: 'Share',
       continue: 'Continue',
       restart: 'Restart',

src/locales/zh-CN.ts

@@ -491,6 +491,7 @@ export default {
     dragComponentHint: '拖动组件到画布',
     task: {
       edit: '编辑任务',
+      editFlow: '编辑流程',
       share: '分享',
       continue: '继续执行',
       restart: '重新执行',

src/locales/zh-TW.ts

@@ -489,6 +489,7 @@ export default {
     dragComponentHint: '拖曳組件到畫布',
     task: {
       edit: '編輯任務',
+      editFlow: '編輯流程',
       share: '分享',
       continue: '繼續',
       restart: '重新開始',

src/styles/custom.scss

@@ -226,7 +226,7 @@ body {
 }
 
 .grid-workflow-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }
 
 .grid-workflow-share-card {