(null)
+// 自定义子类型状态
+const useCustomSubType = ref(false)
+const customSubTypeName = ref('')
+
+const enableCustomSubType = () => {
+ useCustomSubType.value = true
+ customSubTypeName.value = ''
+ categoryStore.selectSubType(null as any)
+ selectedColor.value = null
+}
+
// size_color 流程的动态标题
const sizeColorTitle = computed(() => {
const name = currentCategory.value?.name || ''
@@ -178,6 +229,8 @@ watch(currentSubType, () => {
})
const handleSelectSubType = (subType: SubType) => {
+ useCustomSubType.value = false
+ customSubTypeName.value = ''
categoryStore.selectSubType(subType)
}
@@ -190,6 +243,8 @@ const goToGenerate = () => {
if (currentSubType.value) {
query.subTypeId = String(currentSubType.value.id)
+ } else if (useCustomSubType.value && customSubTypeName.value) {
+ query.customSubType = customSubTypeName.value
}
if (selectedColor.value) {
@@ -377,6 +432,41 @@ $text-light: #999999;
border-color: $primary-color;
color: #fff;
}
+
+ &.custom-tag {
+ border-style: dashed;
+ color: $primary-color;
+
+ &:hover {
+ background: rgba($primary-color, 0.06);
+ }
+
+ &.active {
+ background-color: $primary-color;
+ border-color: $primary-color;
+ border-style: solid;
+ color: #fff;
+ }
+ }
+}
+
+// 自定义输入区域
+.custom-input-area {
+ margin-top: 20px;
+ max-width: 400px;
+}
+
+// 自定义卡片
+.custom-card {
+ .custom-placeholder {
+ background: linear-gradient(135deg, rgba($primary-light, 0.5), rgba($primary-color, 0.5));
+ border: 2px dashed rgba(#fff, 0.6);
+
+ span {
+ font-size: 28px;
+ font-weight: 300;
+ }
+ }
}
// Simple 类型介绍
diff --git a/frontend/src/views/GeneratePage.vue b/frontend/src/views/GeneratePage.vue
index 777180b..4c9a6b7 100644
--- a/frontend/src/views/GeneratePage.vue
+++ b/frontend/src/views/GeneratePage.vue
@@ -221,7 +221,7 @@