feat: 优化

2026-03-04 02:13:16 +08:00
parent aa06782953
commit 7f5d9d9f19
17 changed files with 1958 additions and 1727 deletions
--- a/frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue
+++ b/frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue
@@ -0,0 +1,135 @@
+<template>
+  <a-modal
+    :open="visible"
+    title="选择素材分组"
+    :width="400"
+    :footer="null"
+    centered
+    @update:open="$emit('update:visible', $event)"
+  >
+    <div class="group-select-content">
+      <p class="group-select-hint">请选择用于填充的素材分组：</p>
+      <div class="group-select-list">
+        <div
+          v-for="group in groupList"
+          :key="group.id"
+          class="group-select-item"
+          :class="{ 'group-select-item--active': tempSelectedId === group.id }"
+          @click="tempSelectedId = group.id"
+        >
+          <FolderOutlined class="group-icon" />
+          <span class="group-name">{{ group.name }}</span>
+          <CheckOutlined v-if="tempSelectedId === group.id" class="group-check" />
+        </div>
+      </div>
+      <div class="group-select-footer">
+        <a-button @click="$emit('update:visible', false)">取消</a-button>
+        <a-button
+          type="primary"
+          :disabled="!tempSelectedId"
+          @click="handleConfirm"
+        >
+          确认填充
+        </a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { FolderOutlined, CheckOutlined } from '@ant-design/icons-vue'
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  groupList: { type: Array, default: () => [] },
+  defaultGroupId: { type: [Number, String], default: null }
+})
+
+const emit = defineEmits(['update:visible', 'confirm'])
+
+const tempSelectedId = ref(null)
+
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    tempSelectedId.value = props.defaultGroupId || (props.groupList[0]?.id ?? null)
+  }
+})
+
+const handleConfirm = () => {
+  if (!tempSelectedId.value) return
+  emit('confirm', tempSelectedId.value)
+  emit('update:visible', false)
+}
+</script>
+
+<style scoped lang="less">
+.group-select-content {
+  .group-select-hint {
+    margin: 0 0 16px;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .group-select-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+    margin-bottom: 20px;
+  }
+
+  .group-select-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: #1890ff;
+      background: #f0f7ff;
+    }
+
+    &--active {
+      border-color: #1890ff;
+      background: #e6f7ff;
+
+      .group-icon {
+        color: #1890ff;
+      }
+
+      .group-name {
+        color: #1890ff;
+        font-weight: 500;
+      }
+    }
+
+    .group-icon {
+      font-size: 18px;
+      color: #8c8c8c;
+    }
+
+    .group-name {
+      flex: 1;
+      font-size: 14px;
+      color: #333;
+    }
+
+    .group-check {
+      font-size: 14px;
+      color: #1890ff;
+    }
+  }
+
+  .group-select-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+}
+</style>