优化后，再次提交

unpackage/dist/dev/mp-weixin/components/AreaFormPopup.js

@@ -0,0 +1,116 @@
+"use strict";
+const common_vendor = require("../common/vendor.js");
+const _sfc_main = {
+  __name: "AreaFormPopup",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    editData: {
+      type: Object,
+      default: () => ({})
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:visible", "submit", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const formData = common_vendor.reactive({
+      name: "",
+      color: "#FF5733"
+    });
+    const presetColors = [
+      "#2563eb",
+      "#ef4444",
+      "#10b981",
+      "#f59e0b",
+      "#6366f1",
+      "#ec4899",
+      "#06b6d4",
+      "#84cc16",
+      "#f97316",
+      "#4f46e5",
+      "#dc2626",
+      "#f59e0b",
+      "#d97706",
+      "#8b5cf6",
+      "#db2777"
+    ];
+    common_vendor.watch(() => props.editData, (newVal) => {
+      if (newVal && Object.keys(newVal).length > 0) {
+        formData.name = newVal.name || "";
+        formData.color = newVal.color || "#FF5733";
+      }
+    }, { immediate: true, deep: true });
+    common_vendor.watch(() => props.visible, (newVal) => {
+      if (!newVal) {
+        resetForm();
+      }
+    });
+    const selectColor = (color) => {
+      formData.color = color;
+    };
+    const resetForm = () => {
+      formData.name = "";
+      formData.color = "#FF5733";
+    };
+    const handleClose = () => {
+      emit("update:visible", false);
+      emit("close");
+    };
+    const handleSubmit = () => {
+      if (!formData.name) {
+        common_vendor.index.showToast({ title: "请输入区域名称", icon: "none" });
+        return;
+      }
+      if (!formData.color) {
+        common_vendor.index.showToast({ title: "请选择区域颜色", icon: "none" });
+        return;
+      }
+      emit("submit", {
+        name: formData.name,
+        color: formData.color
+      });
+    };
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: __props.visible
+      }, __props.visible ? {
+        b: common_vendor.t(__props.isEdit ? "编辑区域" : "新增区域"),
+        c: common_vendor.o(handleClose),
+        d: formData.name,
+        e: common_vendor.o(($event) => formData.name = $event.detail.value),
+        f: formData.color,
+        g: common_vendor.o(($event) => formData.color = $event.detail.value),
+        h: formData.color,
+        i: common_vendor.f(presetColors, (color, index, i0) => {
+          return {
+            a: color + index,
+            b: formData.color === color ? 1 : "",
+            c: color,
+            d: common_vendor.o(($event) => selectColor(color), color + index)
+          };
+        }),
+        j: common_vendor.o(handleClose),
+        k: common_vendor.o(handleSubmit),
+        l: __props.loading,
+        m: common_vendor.o(() => {
+        }),
+        n: common_vendor.o(handleClose),
+        o: common_vendor.gei(_ctx, "")
+      } : {});
+    };
+  }
+};
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-fbf56c15"]]);
+wx.createComponent(Component);
+//# sourceMappingURL=../../.sourcemap/mp-weixin/components/AreaFormPopup.js.map

unpackage/dist/dev/mp-weixin/components/AreaFormPopup.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/components/AreaFormPopup.wxml

@@ -0,0 +1 @@
+<view wx:if="{{a}}" bindtap="{{n}}" class="{{['popup-mask', 'data-v-fbf56c15', virtualHostClass]}}" style="{{virtualHostStyle}}" hidden="{{virtualHostHidden || false}}" id="{{o}}"><view class="popup-content data-v-fbf56c15" catchtap="{{m}}"><view class="popup-header data-v-fbf56c15"><view class="popup-title text-bold data-v-fbf56c15">{{b}}</view><view class="popup-close data-v-fbf56c15" bindtap="{{c}}">×</view></view><view class="popup-body data-v-fbf56c15"><view class="flex margin-bottom-sm data-v-fbf56c15"><view class="data-v-fbf56c15">区域名称</view><view class="text-red data-v-fbf56c15">*</view></view><input class="form-input data-v-fbf56c15" placeholder="请输入区域名称" value="{{d}}" bindinput="{{e}}"/><view class="flex margin-bottom-sm margin-top data-v-fbf56c15"><view class="data-v-fbf56c15">区域颜色</view><view class="text-red data-v-fbf56c15">*</view></view><view class="flex align-center data-v-fbf56c15"><input class="color-input flex-sub data-v-fbf56c15" placeholder="#FF5733" value="{{f}}" bindinput="{{g}}"/><view class="color-preview data-v-fbf56c15" style="{{'background-color:' + h}}"></view></view><view class="margin-top margin-bottom-sm text-gray data-v-fbf56c15">预设颜色</view><view class="color-grid data-v-fbf56c15"><view wx:for="{{i}}" wx:for-item="color" wx:key="a" class="{{['color-item', 'data-v-fbf56c15', color.b && 'color-item-active']}}" style="{{'background-color:' + color.c}}" bindtap="{{color.d}}"></view></view></view><view class="popup-footer data-v-fbf56c15"><button class="btn-cancel data-v-fbf56c15" bindtap="{{j}}">取消</button><button class="btn-confirm bg-blue data-v-fbf56c15" bindtap="{{k}}" loading="{{l}}">确定</button></view></view></view>

unpackage/dist/dev/mp-weixin/components/AreaFormPopup.wxss

@@ -0,0 +1,123 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* uni.scss */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.popup-mask.data-v-fbf56c15 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+.popup-content.data-v-fbf56c15 {
+  width: 600rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+.popup-header.data-v-fbf56c15 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #eee;
+}
+.popup-title.data-v-fbf56c15 {
+  font-size: 32rpx;
+}
+.popup-close.data-v-fbf56c15 {
+  font-size: 40rpx;
+  color: #999;
+}
+.popup-body.data-v-fbf56c15 {
+  padding: 30rpx;
+}
+.popup-footer.data-v-fbf56c15 {
+  display: flex;
+  padding: 20rpx 30rpx 30rpx;
+}
+.popup-footer button.data-v-fbf56c15 {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 30rpx;
+  margin: 0 10rpx;
+}
+.popup-footer button.data-v-fbf56c15::after {
+  border: none;
+}
+.popup-footer .btn-cancel.data-v-fbf56c15 {
+  background: #f5f5f5;
+  color: #666;
+}
+.popup-footer .btn-confirm.data-v-fbf56c15 {
+  color: #fff;
+}
+.form-input.data-v-fbf56c15 {
+  width: 100%;
+  height: 70rpx;
+  padding: 0 20rpx;
+  border: 2rpx solid #dadbde;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  box-sizing: border-box;
+}
+.color-input.data-v-fbf56c15 {
+  height: 70rpx;
+  padding: 0 20rpx;
+  border: 2rpx solid #dadbde;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  box-sizing: border-box;
+}
+.color-preview.data-v-fbf56c15 {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 8rpx;
+  margin-left: 20rpx;
+  flex-shrink: 0;
+  border: 2rpx solid #e5e5e5;
+}
+.color-grid.data-v-fbf56c15 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+.color-item.data-v-fbf56c15 {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 12rpx;
+  border: 4rpx solid transparent;
+  box-sizing: border-box;
+}
+.color-item-active.data-v-fbf56c15 {
+  border-color: #333;
+}