af-mobile-client-vue3 1.1.52 → 1.2.0

package/src/views/component/XFormView/index.vue

@@ -3,46 +3,25 @@ import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
 import { ref } from 'vue'
 
-// const configName = ref('AddConstructionForm')
-const configName = ref('PointBindingForm') // 点位绑定
+const configName = ref('AddConstructionForm')
 const serviceName = ref('af-linepatrol')
 
 const formGroupAddConstruction = ref(null)
-
-const formData = ref({
-  t1_f_number: 'name',
-  f_region_id: '5',
-  t1_f_address: '龙首原',
-  t1_f_address_lon_lat: '108.948016,34.292333',
-  t1_f_describe: 't1_f_describe',
-  t1_f_state: 't1_f_state',
-  f_points_devices: '' as string,
-  f_brand: null as number,
-})
-
-function submit(result) {
-  console.log('>>>> form result: ', result)
-}
 </script>
+
 <template>
   <NormalDataLayout id="XFormGroupView" title="纯表单">
     <template #layout_content>
-      <div class="form">
-        <XForm
-          ref="formGroupAddConstruction"
-          mode="新增"
-          :form-data="formData"
-          :config-name="configName"
-          :service-name="serviceName"
-          @on-submit="submit"
-        />
-      </div>
+      <XForm
+        ref="formGroupAddConstruction"
+        mode="新增"
+        :config-name="configName"
+        :service-name="serviceName"
+      />
     </template>
   </NormalDataLayout>
 </template>
 
 <style scoped lang="less">
-.form {
-  margin-top: 2px;
-}
+
 </style>

package/src/views/component/XOlMapView/XLocationPicker/index.vue

@@ -1,118 +1,118 @@
-<script setup lang="ts">
-import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
-import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
-import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { showNotify } from 'vant'
-import { ref } from 'vue'
-
-const selectedLocation = ref<LocationResult>()
-
-// 处理位置选择
-function handleLocationConfirm(location: LocationResult) {
-  // console.log('选择的位置:', location)
-  // selectedLocation.value = location
-  showNotify({ type: 'success', message: '位置已选择' })
-}
-</script>
-
-<template>
-  <NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
-    <template #layout_content>
-      <div class="location-picker-demo">
-        <!-- 页面标题 -->
-        <div class="page-header">
-          <div class="title">
-            位置选择
-          </div>
-        </div>
-
-        <!-- 选择结果展示 -->
-        <div v-if="selectedLocation" class="location-result">
-          <div class="label">
-            已选位置:
-          </div>
-          <div class="value">
-            {{ selectedLocation.address }}
-          </div>
-          <div class="coordinates">
-            经度: {{ selectedLocation.longitude.toFixed(6) }},
-            纬度: {{ selectedLocation.latitude.toFixed(6) }}
-          </div>
-        </div>
-
-        <!-- 地图组件 -->
-        <div class="map-container">
-          <LocationPicker
-            v-model="selectedLocation"
-            :default-center="[108.948024, 34.263161]"
-            :default-zoom="12"
-            @confirm="handleLocationConfirm"
-          />
-        </div>
-      </div>
-    </template>
-  </NormalDataLayout>
-</template>
-
-<style scoped lang="less">
-.location-picker-demo {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: #f7f8fa;
-}
-
-.page-header {
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: white;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  position: relative;
-  z-index: 1;
-
-  .title {
-    font-size: 16px;
-    color: #333;
-    font-weight: 500;
-  }
-}
-
-.location-result {
-  background: white;
-  padding: 12px 16px;
-  margin: 10px;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
-  .label {
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 4px;
-  }
-
-  .value {
-    font-size: 16px;
-    color: #333;
-    margin-bottom: 8px;
-    word-break: break-all;
-  }
-
-  .coordinates {
-    font-size: 12px;
-    color: #999;
-  }
-}
-
-.map-container {
-  flex: 1;
-  position: relative;
-  margin: 0 10px 10px 10px;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-</style>
+<script setup lang="ts">
+import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
+import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { showNotify } from 'vant'
+import { ref } from 'vue'
+
+const selectedLocation = ref<LocationResult>()
+
+// 处理位置选择
+function handleLocationConfirm(location: LocationResult) {
+  // console.log('选择的位置:', location)
+  // selectedLocation.value = location
+  showNotify({ type: 'success', message: '位置已选择' })
+}
+</script>
+
+<template>
+  <NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
+    <template #layout_content>
+      <div class="location-picker-demo">
+        <!-- 页面标题 -->
+        <div class="page-header">
+          <div class="title">
+            位置选择
+          </div>
+        </div>
+
+        <!-- 选择结果展示 -->
+        <div v-if="selectedLocation" class="location-result">
+          <div class="label">
+            已选位置:
+          </div>
+          <div class="value">
+            {{ selectedLocation.address }}
+          </div>
+          <div class="coordinates">
+            经度: {{ selectedLocation.longitude.toFixed(6) }},
+            纬度: {{ selectedLocation.latitude.toFixed(6) }}
+          </div>
+        </div>
+
+        <!-- 地图组件 -->
+        <div class="map-container">
+          <LocationPicker
+            v-model="selectedLocation"
+            :default-center="[108.948024, 34.263161]"
+            :default-zoom="12"
+            @confirm="handleLocationConfirm"
+          />
+        </div>
+      </div>
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+.location-picker-demo {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: #f7f8fa;
+}
+
+.page-header {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 1;
+
+  .title {
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+  }
+}
+
+.location-result {
+  background: white;
+  padding: 12px 16px;
+  margin: 10px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+  .label {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 4px;
+  }
+
+  .value {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 8px;
+    word-break: break-all;
+  }
+
+  .coordinates {
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+.map-container {
+  flex: 1;
+  position: relative;
+  margin: 0 10px 10px 10px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+</style>

package/src/views/component/index.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { isDark, toggleDark } from '@af-mobile-client-vue3/composables/dark'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
 import { indexedDB } from '@af-mobile-client-vue3/utils/indexedDB'
 import {
   showToast,
   Cell as VanCell,
   List as VanList,
+  Switch as VanSwitch,
 } from 'vant'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+
+const checked = computed({
+  get: () => isDark.value,
+  set: () => toggleDark(),
+})
 
 // 列表详情页的路由  '/Component/XCellDetailView/:id'
 const list = ref([
@@ -89,6 +96,16 @@ async function logout() {
     </h1>
     <span class="home_desc">基于Vant4的移动端组件库扩展</span>
     <div class="home_component_main">
+      <span class="home_desc">设置项</span>
+      <VanCell center title="暗黑模式">
+        <template #right-icon>
+          <VanSwitch
+            v-model="checked"
+            size="20px"
+            aria-label="on/off Dark Mode"
+          />
+        </template>
+      </VanCell>
       <span class="home_desc">配置化组件</span>
       <VanList>
         <VanCell v-for="item in list" :key="item.name" :title="item.name" is-link :to="item.to" />
@@ -103,17 +120,31 @@ async function logout() {
 </template>
 
 <style scoped lang="less">
+.van-theme-light {
+  .home_main {
+    .home_title {
+      color: #323233;
+    }
+    .home_desc {
+      color: #969799;
+    }
+    .home_component_main {
+      .van-cell {
+        color: #34495e;
+      }
+    }
+  }
+}
 .home_main {
-  width: 100vw;
-  height: 100%;
   padding: var(--base-interval-2);
-  background-color: #eff2f5;
   .home_title {
+    display: flex;
+    align-items: center;
     margin: 0 0 10px;
     font-size: 30px;
     font-weight: 400;
-    color: rgb(50, 50, 51);
     img {
+      display: inline-block;
       vertical-align: middle;
       width: 46px;
       height: 46px;
@@ -136,7 +167,6 @@ async function logout() {
       margin: 10px 0;
       font-weight: 600;
       border-radius: 99px;
-      color: #34495e;
       :deep(.van-icon) {
         display: flex;
         align-items: center;

package/src/views/user/login/LoginForm.vue

@@ -69,7 +69,7 @@ onBeforeMount(async () => {
           }
           userState.setLogin(loginInfo)
           userState.setTenantName(route.query.state)
-          afterGeneral(data.resources)
+          await afterGeneral(data.resources)
 
           const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
           closeToast()
@@ -118,12 +118,12 @@ function handleSubmit() {
         userState.setLogin(loginInfo)
         const compatible = import.meta.env.VITE_APP_COMPATIBLE
         if (compatible === 'OA')
-          afterGeneral(data)
+          await afterGeneral(data)
         else
           if (data.resources.data)
-            afterGeneral(data.resources.data)
+            await afterGeneral(data.resources.data)
           else
-            afterGeneral(data.resources)
+            await afterGeneral(data.resources)
 
         const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
         closeToast()
@@ -199,7 +199,7 @@ onMounted(() => {})
       </VanLoading>
     </VanRow>
   </div>
-  <div v-if="getShow && !wxloading" class="form login_form">
+  <div v-if="getShow && !wxloading" class="login_form form">
     <VanForm ref="formRef" @submit="handleSubmit">
       <VanField
         v-model="formData.username"
@@ -246,5 +246,5 @@ onMounted(() => {})
 </template>
 
 <style scoped lang="less">
-@import "@af-mobile-client-vue3/styles/login.less";
+@import '@af-mobile-client-vue3/styles/login.less';
 </style>

package/src/views/user/login/LoginTitle.vue

@@ -28,12 +28,22 @@ function getAssetsImages(logo) {
 </template>
 
 <style scoped lang="less">
+html:not(.dark) {
+  .login_title {
+    background-image: url('@af-mobile-client-vue3/assets/img/user/login/background-shadow-1.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+  }
+  .title_content {
+    color: rgb(83, 88, 110);
+    .login_description {
+      color: var(--van-text-color-3);
+    }
+  }
+}
 .login_title {
   width: 100%;
-  background-image: url('@af-mobile-client-vue3/assets/img/user/login/background-shadow-1.svg');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center center;
   text-align: center;
   .login_logo {
     display: flex;
@@ -52,13 +62,11 @@ function getAssetsImages(logo) {
     }
   }
   .title_content {
-    color: rgb(83, 88, 110);
     font-size: 26px;
     font-weight: 600;
     line-height: 26px;
     .login_description {
       margin-top: 13px;
-      color: var(--van-text-color-3);
       font-size: 16px;
       font-weight: 400;
       line-height: 16px;

package/src/views/user/my/index.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
 import {
+  Cell as VanCell,
   Col as VanCol,
+  List as VanList,
   Row as VanRow,
 } from 'vant/es'
 
 const username = useUserStore().getUserInfo().name
-const fullnames = useUserStore().getLogin().f.resources.data.fullnames
+const fullnames = useUserStore().getLogin().f.resources.parentname
 
 async function exit_login() {
   await useUserStore().logout()
@@ -71,8 +73,8 @@ async function exit_login() {
         </VanRow>
       </div>
       <div class="setting">
-        <van-list>
-          <van-cell is-link @click="exit_login">
+        <VanList>
+          <VanCell is-link @click="exit_login">
             <template #title>
               <VanRow :gutter="12" class="setting_row">
                 <VanCol>
@@ -86,8 +88,8 @@ async function exit_login() {
             <template #right-icon>
               <img alt="setting_arrow_icon" class="setting_arrow_icon" src="../../../assets/img/user/my/setting-arrow.png">
             </template>
-          </van-cell>
-        </van-list>
+          </VanCell>
+        </VanList>
       </div>
     </div>
   </main>
@@ -98,7 +100,7 @@ async function exit_login() {
   .header {
     position: relative;
     height: 200px;
-    background-color: #336BF1;
+    background-color: #336bf1;
     overflow: hidden;
     .style_back {
       .circle {
@@ -106,7 +108,7 @@ async function exit_login() {
         border-radius: 50%;
       }
       .circle1 {
-        background-color: #3F7AFA;
+        background-color: #3f7afa;
         width: 265px;
         height: 265px;
         top: -80px;
@@ -114,7 +116,7 @@ async function exit_login() {
         z-index: 3;
       }
       .circle2 {
-        background-color: #3C75F9;
+        background-color: #3c75f9;
         width: 300px;
         height: 300px;
         top: -80px;
@@ -145,8 +147,9 @@ async function exit_login() {
           border-radius: 50%;
           width: 76px;
           height: 76px;
-          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05),
-          0 6px 6px rgba(0, 0, 0, 0.05);
+          box-shadow:
+            0 10px 20px rgba(0, 0, 0, 0.05),
+            0 6px 6px rgba(0, 0, 0, 0.05);
         }
         .van-row {
           flex-wrap: nowrap;
@@ -157,7 +160,7 @@ async function exit_login() {
               margin: 0;
             }
             .user_nickname {
-              font-size: 24px;
+              font-size: 20px;
               font-weight: bold;
               margin-bottom: 4px;
             }
@@ -168,7 +171,6 @@ async function exit_login() {
         }
       }
     }
-
   }
   .content {
     padding: var(--base-interval-1);
@@ -180,8 +182,9 @@ async function exit_login() {
       z-index: 4;
       margin: 0 16px;
       border-radius: 4px;
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05),
-      0 6px 6px rgba(0, 0, 0, 0.05);
+      box-shadow:
+        0 10px 20px rgba(0, 0, 0, 0.05),
+        0 6px 6px rgba(0, 0, 0, 0.05);
       .core_row {
         text-align: center;
         .van-col {

package/tsconfig.json

@@ -13,7 +13,6 @@
     "types": [
       "node",
       "unplugin-vue-router/client",
-      "vite-plugin-vue-layouts/client",
       "vite-plugin-pwa/client"
     ],
     "allowJs": true,

package/uno.config.ts

@@ -1,32 +1,47 @@
-import presetRemToPx from '@unocss/preset-rem-to-px'
-import { defineConfig, presetAttributify, presetMini, presetUno } from 'unocss'
+import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
 
-// 刚使用unocss的朋友，可以借助这个工具： https://to-unocss.netlify.app
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+const BASE_FONT_SIZE = 4
 
 export default defineConfig({
+  shortcuts: [
+    ['btn', 'px-6 py-3 rounded-4 border-none inline-block bg-green-400 text-white cursor-pointer outline-hidden hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+  ],
   presets: [
-    presetUno,
-    presetAttributify,
-    // 为什么要用到这个插件？
-    // 模板使用 viewport 作为移动端适配方案，unocss 默认单位为 rem
-    // 所以需要转成 px，然后由 postcss 把 px 转成 vw/vh，完成适配
-    presetRemToPx({
-      // 这里为什么要设置基础字体大小？看下面这篇文章
-      // https://juejin.cn/post/7262975395620618298
-      baseFontSize: 4,
-    }),
-    presetMini({
-      dark: {
-        dark: '.van-theme-dark',
-        light: '.van-theme-light',
+    presetWind4({
+      preflights: {
+        theme: {
+          process: createRemToPxProcessor(BASE_FONT_SIZE),
+        },
       },
     }),
+    presetAttributify(),
+    presetIcons(
+      {
+        scale: 1.2,
+        warn: true,
+        extraProperties: {
+          'display': 'inline-block',
+          'vertical-align': 'middle',
+          'width': 'var(--van-font-size-md)',
+          'height': 'var(--van-font-size-md)',
+        },
+      },
+    ),
+  ],
+  postprocess: [
+    createRemToPxProcessor(BASE_FONT_SIZE),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
   ],
-  shortcuts: {
-    // shortcuts to multiple utilities
-    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
-    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
-    'btn-blue': 'text-white bg-blue-500 hover:bg-blue-700',
-    'centered': 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2',
-  },
 })