@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/components/PrismCityPicker/PrismCityPicker.wxss

@@ -0,0 +1,309 @@
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ *
+ * 主题切换：修改下面的引入文件即可切换主题
+ * 可选主题：blue(默认) / green / purple / orange / red / cyan
+ */
+/**
+ * Prism UI - 蓝色主题（默认）
+ *
+ * 使用方式：在 variables.scss 中修改引入
+ * @import '../theme/blue.scss';
+ *
+ * 颜色值来自 colors.scss 中的 $prism-blue-* 变量
+ */
+/* ============================================================
+   一、浅色模式变量（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* -------------------- 主题色 -------------------- */
+/* -------------------- 状态色 -------------------- */
+/* -------------------- 文字颜色 -------------------- */
+/* -------------------- 边框颜色 -------------------- */
+/* -------------------- 背景颜色 -------------------- */
+/* ============================================================
+   二、深色模式变量
+   ============================================================ */
+/* -------------------- 主题色（深色） -------------------- */
+/* -------------------- 状态色（深色） -------------------- */
+/* -------------------- 文字颜色（深色） -------------------- */
+/* -------------------- 边框颜色（深色） -------------------- */
+/* -------------------- 背景颜色（深色） -------------------- */
+/* ============================================================
+   三、主题色透明度（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   主题色渐变（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   四、白色透明度
+   ============================================================ */
+/* ============================================================
+   六、第三方品牌色
+   ============================================================ */
+/* ============================================================
+   八、常用阴影（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+.prism-city-picker .picker-trigger {
+  cursor: pointer;
+}
+.prism-city-picker .picker-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 9999;
+}
+.prism-city-picker .picker-content {
+  width: 100%;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 24rpx 24rpx 0 0;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+.prism-city-picker .picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 32rpx;
+  border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+}
+.prism-city-picker .picker-cancel {
+  font-size: 30rpx;
+  color: var(--prism-text-secondary, #86909C);
+  padding: 8rpx 16rpx;
+}
+.prism-city-picker .picker-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+}
+.prism-city-picker .picker-confirm {
+  font-size: 30rpx;
+  color: var(--prism-primary-color, #3478F6);
+  padding: 8rpx 16rpx;
+  font-weight: 500;
+}
+.prism-city-picker .picker-body {
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: content-box;
+  position: relative;
+}
+.prism-city-picker .picker-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+.prism-city-picker .picker-indicator {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  z-index: 0 !important;
+}
+.prism-city-picker .picker-item {
+  position: relative;
+  z-index: 2;
+}
+.prism-city-picker .uni-picker-view-mask {
+  z-index: 1 !important;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) !important;
+}
+.prism-city-picker .uni-picker-view-indicator {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-color: transparent !important;
+}
+.prism-city-picker .cascade-body {
+  display: flex;
+  flex-direction: column;
+  height: 500rpx;
+}
+.prism-city-picker .hot-cities {
+  padding: 24rpx 32rpx;
+  background: var(--prism-bg-color-card, #FFFFFF);
+}
+.prism-city-picker .hot-cities-title {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 26rpx;
+  color: var(--prism-text-secondary, #86909C);
+  margin-bottom: 20rpx;
+}
+.prism-city-picker .hot-cities-title .fa-fire {
+  color: #FF6B00;
+}
+.prism-city-picker .hot-cities-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+.prism-city-picker .hot-city-item {
+  padding: 16rpx 28rpx;
+  background: var(--prism-bg-color-container, #F7F8FA);
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  color: var(--prism-text-primary, #1D2129);
+}
+.prism-city-picker .hot-city-item:active {
+  background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+  color: var(--prism-primary-color, #3478F6);
+}
+.prism-city-picker .hot-cities-divider {
+  display: flex;
+  align-items: center;
+  margin-top: 24rpx;
+  padding-top: 20rpx;
+  border-top: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+  font-size: 26rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.prism-city-picker .cascade-breadcrumb {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 32rpx;
+  background: var(--prism-bg-color-container, #F7F8FA);
+  flex-wrap: wrap;
+  gap: 8rpx;
+}
+.prism-city-picker .breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+.prism-city-picker .breadcrumb-item text:first-child {
+  font-size: 28rpx;
+  color: var(--prism-primary-color, #3478F6);
+}
+.prism-city-picker .breadcrumb-item .fa {
+  font-size: 20rpx;
+  color: var(--prism-text-placeholder, #C9CDD4);
+}
+.prism-city-picker .breadcrumb-clear {
+  margin-left: auto;
+  padding: 8rpx;
+}
+.prism-city-picker .breadcrumb-clear .fa {
+  font-size: 28rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.prism-city-picker .cascade-list {
+  flex: 1;
+  height: 400rpx;
+}
+.prism-city-picker .cascade-item {
+  display: flex;
+  align-items: center;
+  padding: 28rpx 32rpx;
+  border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+}
+.prism-city-picker .cascade-item.selected .item-name {
+  color: var(--prism-primary-color, #3478F6);
+  font-weight: 500;
+}
+.prism-city-picker .item-content {
+  flex: 1;
+}
+.prism-city-picker .item-name {
+  font-size: 30rpx;
+  color: var(--prism-text-primary, #1D2129);
+}
+.prism-city-picker .item-code {
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+  margin-top: 8rpx;
+}
+.prism-city-picker .item-arrow {
+  font-size: 24rpx;
+  color: var(--prism-text-placeholder, #C9CDD4);
+}
+.prism-city-picker .item-check {
+  font-size: 28rpx;
+  color: var(--prism-primary-color, #3478F6);
+}
+.prism-city-picker .cascade-empty {
+  padding: 80rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16rpx;
+}
+.prism-city-picker .cascade-empty .fa {
+  font-size: 64rpx;
+  color: var(--prism-text-placeholder, #C9CDD4);
+}
+.prism-city-picker .cascade-empty text:last-child {
+  font-size: 28rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.dark-mode.prism-city-picker .picker-content {
+  background: var(--prism-bg-color-card, #1A1A1A);
+}
+.dark-mode.prism-city-picker .picker-item {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode.prism-city-picker .picker-body .picker-indicator,
+.dark-mode.prism-city-picker .picker-indicator {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+}
+.dark-mode.prism-city-picker .uni-picker-view-indicator {
+  background: transparent !important;
+  border: none !important;
+  border-width: 0 !important;
+  border-color: transparent !important;
+}
+.dark-mode.prism-city-picker .uni-picker-view-indicator::before,
+.dark-mode.prism-city-picker .uni-picker-view-indicator::after {
+  display: none !important;
+  border: none !important;
+}
+.dark-mode.prism-city-picker picker-view-column::before,
+.dark-mode.prism-city-picker picker-view-column::after {
+  display: none !important;
+}
+.dark-mode.prism-city-picker .uni-picker-view-mask {
+  background-image: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6)), linear-gradient(0deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6)) !important;
+}
+.dark-mode.prism-city-picker .hot-cities {
+  background: var(--prism-bg-color-card, #1A1A1A);
+}
+.dark-mode.prism-city-picker .hot-city-item {
+  background: var(--prism-bg-color-container, #2A2A2A);
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode.prism-city-picker .hot-cities-divider {
+  border-top-color: var(--prism-border-color-base, #3A3A3A);
+}
+.dark-mode.prism-city-picker .cascade-breadcrumb {
+  background: var(--prism-bg-color-container, #2A2A2A);
+}
+.dark-mode.prism-city-picker .cascade-item:active {
+  background: var(--prism-bg-color-container, #2A2A2A);
+}
+.dark-mode.prism-city-picker .cascade-item.selected .item-name {
+  color: var(--prism-primary-color, #3478F6);
+}

package/dist/dev/mp-weixin/components/PrismCitySelect/PrismCitySelect.js

@@ -0,0 +1,200 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+if (!Math) {
+  PrismGroupSticky();
+}
+const PrismGroupSticky = () => "../PrismGroupSticky/PrismGroupSticky.js";
+const _sfc_main = {
+  __name: "PrismCitySelect",
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => null
+    },
+    placeholder: {
+      type: String,
+      default: "请选择城市"
+    },
+    title: {
+      type: String,
+      default: "选择城市"
+    },
+    showHotCities: {
+      type: Boolean,
+      default: true
+    },
+    hotCities: {
+      type: Array,
+      default: () => [
+        { name: "北京", code: "110000", provinceName: "北京市" },
+        { name: "上海", code: "310000", provinceName: "上海市" },
+        { name: "广州", code: "440100", provinceName: "广东省" },
+        { name: "深圳", code: "440300", provinceName: "广东省" },
+        { name: "杭州", code: "330100", provinceName: "浙江省" },
+        { name: "成都", code: "510100", provinceName: "四川省" },
+        { name: "武汉", code: "420100", provinceName: "湖北省" },
+        { name: "南京", code: "320100", provinceName: "江苏省" }
+      ]
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "change", "confirm"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const appStore = store_app.useAppStore();
+    const showPicker = common_vendor.ref(false);
+    const searchKeyword = common_vendor.ref("");
+    const searchResults = common_vendor.ref([]);
+    const cityData = [
+      { name: "北京", code: "110000", letter: "B", provinceName: "北京市" },
+      { name: "天津", code: "120000", letter: "T", provinceName: "天津市" },
+      { name: "上海", code: "310000", letter: "S", provinceName: "上海市" },
+      { name: "重庆", code: "500000", letter: "C", provinceName: "重庆市" },
+      { name: "广州", code: "440100", letter: "G", provinceName: "广东省" },
+      { name: "深圳", code: "440300", letter: "S", provinceName: "广东省" },
+      { name: "杭州", code: "330100", letter: "H", provinceName: "浙江省" },
+      { name: "宁波", code: "330200", letter: "N", provinceName: "浙江省" },
+      { name: "南京", code: "320100", letter: "N", provinceName: "江苏省" },
+      { name: "苏州", code: "320500", letter: "S", provinceName: "江苏省" },
+      { name: "成都", code: "510100", letter: "C", provinceName: "四川省" },
+      { name: "武汉", code: "420100", letter: "W", provinceName: "湖北省" },
+      { name: "长沙", code: "430100", letter: "C", provinceName: "湖南省" },
+      { name: "西安", code: "610100", letter: "X", provinceName: "陕西省" },
+      { name: "郑州", code: "410100", letter: "Z", provinceName: "河南省" },
+      { name: "青岛", code: "370200", letter: "Q", provinceName: "山东省" },
+      { name: "济南", code: "370100", letter: "J", provinceName: "山东省" },
+      { name: "大连", code: "210200", letter: "D", provinceName: "辽宁省" },
+      { name: "沈阳", code: "210100", letter: "S", provinceName: "辽宁省" },
+      { name: "厦门", code: "350200", letter: "X", provinceName: "福建省" },
+      { name: "福州", code: "350100", letter: "F", provinceName: "福建省" },
+      { name: "合肥", code: "340100", letter: "H", provinceName: "安徽省" },
+      { name: "昆明", code: "530100", letter: "K", provinceName: "云南省" },
+      { name: "南昌", code: "360100", letter: "N", provinceName: "江西省" },
+      { name: "南宁", code: "450100", letter: "N", provinceName: "广西壮族自治区" },
+      { name: "贵阳", code: "520100", letter: "G", provinceName: "贵州省" },
+      { name: "兰州", code: "620100", letter: "L", provinceName: "甘肃省" },
+      { name: "太原", code: "140100", letter: "T", provinceName: "山西省" },
+      { name: "石家庄", code: "130100", letter: "S", provinceName: "河北省" },
+      { name: "哈尔滨", code: "230100", letter: "H", provinceName: "黑龙江省" },
+      { name: "长春", code: "220100", letter: "C", provinceName: "吉林省" }
+    ];
+    const displayValue = common_vendor.computed(() => {
+      if (!props.modelValue) return "";
+      return props.modelValue.name || "";
+    });
+    const indexList = common_vendor.computed(() => {
+      const letters = [...new Set(cityData.map((c) => c.letter))];
+      return letters.sort();
+    });
+    const groupedCities = common_vendor.computed(() => {
+      const groups = {};
+      cityData.forEach((city) => {
+        if (!groups[city.letter]) {
+          groups[city.letter] = [];
+        }
+        groups[city.letter].push(city);
+      });
+      return indexList.value.map((letter) => ({
+        letter,
+        cities: groups[letter] || []
+      }));
+    });
+    function openPicker() {
+      if (props.disabled) return;
+      showPicker.value = true;
+      searchKeyword.value = "";
+    }
+    function closePicker() {
+      showPicker.value = false;
+    }
+    function selectCity(city) {
+      const result = { code: city.code, name: city.name, provinceName: city.provinceName };
+      emit("update:modelValue", result);
+      emit("change", result);
+      emit("confirm", result);
+      showPicker.value = false;
+    }
+    function onSearch() {
+      if (!searchKeyword.value.trim()) {
+        searchResults.value = [];
+        return;
+      }
+      const keyword = searchKeyword.value.trim().toLowerCase();
+      searchResults.value = cityData.filter(
+        (city) => city.name.toLowerCase().includes(keyword)
+      );
+    }
+    function clearSearch() {
+      searchKeyword.value = "";
+      searchResults.value = [];
+    }
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: common_vendor.t(displayValue.value || __props.placeholder),
+        b: !displayValue.value ? 1 : "",
+        c: displayValue.value ? 1 : "",
+        d: common_vendor.o(openPicker),
+        e: showPicker.value
+      }, showPicker.value ? common_vendor.e({
+        f: common_vendor.o(closePicker),
+        g: common_vendor.t(__props.title),
+        h: common_vendor.o([($event) => searchKeyword.value = $event.detail.value, onSearch]),
+        i: searchKeyword.value,
+        j: searchKeyword.value
+      }, searchKeyword.value ? {
+        k: common_vendor.o(clearSearch)
+      } : {}, {
+        l: searchKeyword.value
+      }, searchKeyword.value ? common_vendor.e({
+        m: common_vendor.f(searchResults.value, (item, k0, i0) => {
+          return {
+            a: common_vendor.t(item.name),
+            b: common_vendor.t(item.provinceName),
+            c: item.code,
+            d: common_vendor.o(($event) => selectCity(item), item.code)
+          };
+        }),
+        n: !searchResults.value.length
+      }, !searchResults.value.length ? {} : {}) : common_vendor.e({
+        o: __props.showHotCities
+      }, __props.showHotCities ? {
+        p: common_vendor.f(__props.hotCities, (city, k0, i0) => {
+          return {
+            a: common_vendor.t(city.name),
+            b: city.code,
+            c: common_vendor.o(($event) => selectCity(city), city.code)
+          };
+        })
+      } : {}, {
+        q: common_vendor.f(groupedCities.value, (group, k0, i0) => {
+          return {
+            a: common_vendor.t(group.letter),
+            b: "group-" + group.letter,
+            c: common_vendor.f(group.cities, (city, k1, i1) => {
+              return {
+                a: common_vendor.t(city.name),
+                b: city.code,
+                c: common_vendor.o(($event) => selectCity(city), city.code)
+              };
+            }),
+            d: group.letter
+          };
+        }),
+        r: common_vendor.p({
+          indexList: indexList.value,
+          showIndexBar: true,
+          height: "100%"
+        })
+      })) : {}, {
+        s: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      });
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismCitySelect/PrismCitySelect.js.map

package/dist/dev/mp-weixin/components/PrismCitySelect/PrismCitySelect.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "prism-group-sticky": "../PrismGroupSticky/PrismGroupSticky"
+  }
+}

package/dist/dev/mp-weixin/components/PrismCitySelect/PrismCitySelect.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-city-select', s && 'dark-mode']}}"><view class="picker-trigger" bindtap="{{d}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else><view class="prism-select-box"><text class="{{[b && 'placeholder', c && 'select-text']}}">{{a}}</text><text class="select-arrow fa fa-map-marker-alt"></text></view></block></view><view wx:if="{{e}}" class="picker-page"><view class="page-header"><view class="header-back" bindtap="{{f}}"><text class="fa fa-arrow-left"></text></view><view class="header-title">{{g}}</view><view class="header-right"></view></view><view class="search-box"><view class="search-input-wrap"><text class="fa fa-search"></text><input class="search-input" type="text" placeholder="搜索城市" bindinput="{{h}}" value="{{i}}"/><text wx:if="{{j}}" class="fa fa-times-circle" bindtap="{{k}}"></text></view></view><view class="page-content"><scroll-view wx:if="{{l}}" class="search-results" scroll-y><view wx:for="{{m}}" wx:for-item="item" wx:key="c" class="result-item" bindtap="{{item.d}}"><text>{{item.a}}</text><text class="result-province">{{item.b}}</text></view><view wx:if="{{n}}" class="search-empty"><text class="fa fa-search"></text><text>未找到相关城市</text></view></scroll-view><view wx:else class="city-content"><prism-group-sticky wx:if="{{r}}" u-s="{{['d']}}" u-i="323339fa-0" bind:__l="__l" u-p="{{r}}"><view wx:if="{{o}}" class="hot-section"><view class="section-title"><text class="fa fa-fire"></text><text>热门城市</text></view><view class="hot-cities-grid"><view wx:for="{{p}}" wx:for-item="city" wx:key="b" class="hot-city-item" bindtap="{{city.c}}">{{city.a}}</view></view></view><block wx:for="{{q}}" wx:for-item="group" wx:key="d"><view class="group-index" id="{{group.b}}">{{group.a}}</view><view wx:for="{{group.c}}" wx:for-item="city" wx:key="b" class="group-item" bindtap="{{city.c}}">{{city.a}}</view></block></prism-group-sticky></view></view></view></view>