feat：新增 TagDialog 自定义弹窗组件，深色太空主题样式

2026-06-24 22:40:43 +08:00
parent 637334adb8
commit bd0f4d6bea
1 changed files with 189 additions and 0 deletions
@@ -0,0 +1,189 @@
+<template>
+  <view v-if="visible" class="tag-dialog-mask" @click="onMaskClick">
+    <view class="tag-dialog-card glass-card" @click.stop>
+      <view class="tag-dialog-title-row">
+        <text class="tag-dialog-gold">✦</text>
+        <text class="tag-dialog-title">{{ title }}</text>
+      </view>
+
+      <input
+        v-if="mode === 'input'"
+        class="tag-dialog-input"
+        :value="modelValue"
+        :placeholder="placeholder"
+        placeholder-class="tag-dialog-placeholder"
+        :maxlength="4"
+        @input="onInput"
+        @confirm="onInputConfirm"
+      />
+
+      <text v-if="mode === 'confirm'" class="tag-dialog-content">{{ content }}</text>
+
+      <view class="tag-dialog-actions">
+        <view class="tag-dialog-btn tag-dialog-btn-cancel" @click="onCancel">
+          <text>取消</text>
+        </view>
+        <view class="tag-dialog-btn tag-dialog-btn-confirm" @click="onConfirm">
+          <text>确定</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  mode: {
+    type: String,
+    default: 'input'
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  content: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['confirm', 'cancel', 'update:modelValue', 'update:visible'])
+
+const onInput = (event) => {
+  const value = event.detail.value
+  emit('update:modelValue', value)
+}
+
+const onInputConfirm = () => {
+  emit('confirm', props.modelValue)
+}
+
+const onConfirm = () => {
+  if (props.mode === 'input') {
+    emit('confirm', props.modelValue)
+  } else {
+    emit('confirm')
+  }
+}
+
+const onCancel = () => {
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+const onMaskClick = () => {
+  emit('cancel')
+  emit('update:visible', false)
+}
+</script>
+
+<style scoped>
+.tag-dialog-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(3, 2, 13, 0.72);
+}
+
+.tag-dialog-card {
+  width: 560rpx;
+  box-sizing: border-box;
+  padding: 36rpx 32rpx 28rpx;
+  border-radius: 22rpx;
+  border: 1rpx solid rgba(155, 110, 255, 0.14);
+  background:
+    radial-gradient(circle at 92% 12%, rgba(104, 66, 255, 0.1), transparent 34%),
+    rgba(10, 13, 43, 0.54);
+  box-shadow: inset 0 0 30rpx rgba(123, 60, 255, 0.05), 0 10rpx 36rpx rgba(0, 0, 0, 0.16);
+  backdrop-filter: blur(24rpx);
+  -webkit-backdrop-filter: blur(24rpx);
+}
+
+.tag-dialog-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 24rpx;
+}
+
+.tag-dialog-gold {
+  color: #ffd58c;
+  font-size: 26rpx;
+  text-shadow: 0 0 20rpx rgba(255, 202, 125, 0.45);
+}
+
+.tag-dialog-title {
+  color: #fff;
+  font-size: 30rpx;
+  font-weight: 900;
+}
+
+.tag-dialog-input {
+  width: 100%;
+  box-sizing: border-box;
+  height: 80rpx;
+  margin-bottom: 28rpx;
+  padding: 0 20rpx;
+  border-radius: 14rpx;
+  border: 1rpx solid rgba(151, 111, 255, 0.22);
+  background: rgba(10, 12, 40, 0.66);
+  color: #fff;
+  font-size: 26rpx;
+}
+
+.tag-dialog-placeholder {
+  color: rgba(214, 204, 235, 0.42);
+}
+
+.tag-dialog-content {
+  display: block;
+  margin-bottom: 32rpx;
+  color: rgba(239, 232, 255, 0.86);
+  font-size: 26rpx;
+  line-height: 1.6;
+}
+
+.tag-dialog-actions {
+  display: flex;
+  gap: 20rpx;
+}
+
+.tag-dialog-btn {
+  flex: 1;
+  height: 72rpx;
+  border-radius: 14rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  font-weight: 700;
+}
+
+.tag-dialog-btn-cancel {
+  color: rgba(239, 232, 255, 0.82);
+  border: 1rpx solid rgba(151, 111, 255, 0.42);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.tag-dialog-btn-confirm {
+  color: #fff;
+  border: 1rpx solid rgba(206, 82, 255, 0.95);
+  background: linear-gradient(180deg, rgba(169, 61, 255, 0.62), rgba(107, 41, 206, 0.5));
+  box-shadow: 0 0 18rpx rgba(168, 67, 255, 0.52), inset 0 1rpx 0 rgba(255, 255, 255, 0.22);
+}
+</style>