af-mobile-client-vue3 1.3.12 → 1.3.14

package/src/views/component/index.vue

@@ -1,177 +1,181 @@
-<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 { computed, ref } from 'vue'
-
-const checked = computed({
-  get: () => isDark.value,
-  set: () => toggleDark(),
-})
-
-// 列表详情页的路由  '/Component/XCellDetailView/:id'
-const list = ref([
-  {
-    name: 'XCellList 单元格列表',
-    to: '/Component/XCellListView',
-  },
-  {
-    name: 'XReportForm 报表表单',
-    to: '/Component/XReportFormView',
-  },
-  {
-    name: 'XCellDetail 列表详情页',
-    to: '/Component/XCellDetailView/0',
-  },
-  {
-    name: 'XForm 表单',
-    to: '/Component/XFormView/1/debug?configName=hiddenTroubleFollowForm&serviceName=af-linepatrol&mode=新增',
-  },
-  {
-    name: 'XFormGroup 表单组',
-    to: '/Component/XFormGroupView',
-  },
-  {
-    name: '操作卡手机端',
-    to: '/Component/XReportFormView',
-  },
-  {
-    name: '评论记录列表',
-    to: '/Component/EvaluateRecordView',
-  },
-  {
-    name: 'XSignature 签名组件',
-    to: '/Component/XSignatureView',
-  },
-  {
-    name: 'XReportGridView 栅格组件',
-    to: '/Component/XReportGridView',
-  },
-  {
-    name: 'XFormAppraise 表单',
-    to: '/Component/XFormAppraiseView/2/debug',
-  },
-  {
-    name: 'XOlMap 地图组件',
-    to: '/Component/XOlMapView',
-  },
-  {
-    name: 'XOlMap 地址选择器',
-    to: '/Component/XOlMapView/XLocationPicker',
-  },
-  {
-    name: '请求示例',
-    to: '/Component/XRequestView',
-  },
-  {
-    name: 'Iconify 图标使用示例',
-    to: '/Component/IconifyView',
-  },
-])
-
-function cleanConfigCache() {
-  // 清除indexedDB缓存
-  indexedDB.clear()
-  showToast({
-    message: '操作成功',
-  })
-}
-
-async function logout() {
-  await useUserStore().logout()
-}
-</script>
-
-<template>
-  <main class="home_main">
-    <h1 class="home_title">
-      <img src="@af-mobile-client-vue3/assets/img/component/logo.png" alt="logo">
-      <span>Vue3-Client</span>
-    </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" />
-      </VanList>
-      <span class="home_desc">开发者工具</span>
-      <VanList>
-        <VanCell key="clean_config_cache" title="清除配置缓存" @click="cleanConfigCache" />
-        <VanCell key="clean_config_cache" title="退出登录" @click="logout" />
-      </VanList>
-    </div>
-  </main>
-</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 {
-  padding: var(--base-interval-2);
-  .home_title {
-    display: flex;
-    align-items: center;
-    margin: 0 0 10px;
-    font-size: 30px;
-    font-weight: 400;
-    img {
-      display: inline-block;
-      vertical-align: middle;
-      width: 46px;
-      height: 46px;
-    }
-    span {
-      margin-left: 12px;
-    }
-  }
-  .home_desc {
-    padding-left: 16px;
-    font-weight: 400;
-    line-height: 1.6;
-    margin: 0 0 40px;
-    color: #969799;
-    font-size: 14px;
-  }
-  .home_component_main {
-    margin-top: 30px;
-    .van-cell {
-      margin: 10px 0;
-      font-weight: 600;
-      border-radius: 99px;
-      :deep(.van-icon) {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-}
-</style>
+<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 { computed, ref } from 'vue'
+
+const checked = computed({
+  get: () => isDark.value,
+  set: () => toggleDark(),
+})
+
+// 列表详情页的路由  '/Component/XCellDetailView/:id'
+const list = ref([
+  {
+    name: 'XCellList 单元格列表',
+    to: '/Component/XCellListView',
+  },
+  {
+    name: 'XReportForm 报表表单',
+    to: '/Component/XReportFormView',
+  },
+  {
+    name: 'XCellDetail 列表详情页',
+    to: '/Component/XCellDetailView/0',
+  },
+  {
+    name: 'XForm 表单',
+    to: '/Component/XFormView/1/debug?configName=hiddenTroubleFollowForm&serviceName=af-linepatrol&mode=新增',
+  },
+  {
+    name: 'XFormGroup 表单组',
+    to: '/Component/XFormGroupView',
+  },
+  {
+    name: '操作卡手机端',
+    to: '/Component/XReportFormView',
+  },
+  {
+    name: '评论记录列表',
+    to: '/Component/EvaluateRecordView',
+  },
+  {
+    name: 'XSignature 签名组件',
+    to: '/Component/XSignatureView',
+  },
+  {
+    name: 'XReportGridView 栅格组件',
+    to: '/Component/XReportGridView',
+  },
+  {
+    name: 'XFormAppraise 表单',
+    to: '/Component/XFormAppraiseView/2/debug',
+  },
+  {
+    name: 'XOlMap 地图组件',
+    to: '/Component/XOlMapView',
+  },
+  {
+    name: 'XOlMap 地址选择器',
+    to: '/Component/XOlMapView/XLocationPicker',
+  },
+  {
+    name: '请求示例',
+    to: '/Component/XRequestView',
+  },
+  {
+    name: 'Iconify 图标使用示例',
+    to: '/Component/IconifyView',
+  },
+  {
+    name: 'UserDetail 用户详情组件',
+    to: '/Component/UserDetailView',
+  },
+])
+
+function cleanConfigCache() {
+  // 清除indexedDB缓存
+  indexedDB.clear()
+  showToast({
+    message: '操作成功',
+  })
+}
+
+async function logout() {
+  await useUserStore().logout()
+}
+</script>
+
+<template>
+  <main class="home_main">
+    <h1 class="home_title">
+      <img src="@af-mobile-client-vue3/assets/img/component/logo.png" alt="logo">
+      <span>Vue3-Client</span>
+    </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" />
+      </VanList>
+      <span class="home_desc">开发者工具</span>
+      <VanList>
+        <VanCell key="clean_config_cache" title="清除配置缓存" @click="cleanConfigCache" />
+        <VanCell key="clean_config_cache" title="退出登录" @click="logout" />
+      </VanList>
+    </div>
+  </main>
+</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 {
+  padding: var(--base-interval-2);
+  .home_title {
+    display: flex;
+    align-items: center;
+    margin: 0 0 10px;
+    font-size: 30px;
+    font-weight: 400;
+    img {
+      display: inline-block;
+      vertical-align: middle;
+      width: 46px;
+      height: 46px;
+    }
+    span {
+      margin-left: 12px;
+    }
+  }
+  .home_desc {
+    padding-left: 16px;
+    font-weight: 400;
+    line-height: 1.6;
+    margin: 0 0 40px;
+    color: #969799;
+    font-size: 14px;
+  }
+  .home_component_main {
+    margin-top: 30px;
+    .van-cell {
+      margin: 10px 0;
+      font-weight: 600;
+      border-radius: 99px;
+      :deep(.van-icon) {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

package/src/views/component/menu.vue

@@ -1,117 +1,117 @@
-<script setup lang="ts">
-import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
-import { getImageUrl } from '@af-mobile-client-vue3/utils/common'
-import {
-  Grid as VanGrid,
-  GridItem as VanGridItem,
-  Swipe as VanSwipe,
-  SwipeItem as VanSwipeItem,
-} from 'vant/es'
-
-const apps = {
-  测试图标1: {
-    remark: '测试图标1',
-    icon: 'assets/img/apps/safe-check-web.png',
-  },
-  测试图标2: {
-    remark: '报装',
-    icon: 'assets/img/apps/apply-web.png',
-  },
-  测试图标3: {
-    remark: '营收',
-    icon: 'assets/img/apps/revenue-web.png',
-  },
-  测试图标4: {
-    remark: '物联网表',
-    icon: 'assets/img/apps/iot-web.png',
-  },
-}
-
-const images = [
-  '../assets/img/home/banner1.png',
-  '../assets/img/home/banner2.png',
-  '../assets/img/home/banner3.png',
-  '../assets/img/home/banner4.png',
-]
-
-interface Func {
-  link: string
-  navigate?: string
-  module: any
-  name: string
-  children?: Array<Func>
-}
-
-interface App {
-  module: Func
-  icon: string
-}
-
-function initAppMenu(func: Array<Func> | undefined) {
-  const functions = []
-  if (func && func.length > 0) {
-    for (let index = 0; index < func.length; index++) {
-      const module = func[index]
-      const app = apps[module.link]
-      if (app) {
-        functions.push({
-          module,
-          icon: app.icon,
-        })
-      }
-    }
-    return functions
-  }
-  return []
-}
-
-const appList: Array<App> = initAppMenu(useUserStore().getUserInfo().functions)
-console.warn(appList)
-</script>
-
-<template>
-  <div class="menu_main">
-    <VanSwipe class="my-swipe" :autoplay="3000" lazy-render>
-      <VanSwipeItem v-for="image in images" :key="image">
-        <img :src="getImageUrl(image)" width="100%" height="100%">
-      </VanSwipeItem>
-    </VanSwipe>
-    <VanGrid :border="false">
-      <VanGridItem v-for="app in appList" :key="app.module.link" :to="`app/${app.module.link}`">
-        <img class="app_icon" :src="getImageUrl(app.icon, '../')">
-        <span class="app_title">{{ app.module.name }}</span>
-      </VanGridItem>
-    </VanGrid>
-  </div>
-</template>
-
-<style scoped lang="less">
-.menu_main {
-  margin-bottom: var(--base-interval-2)
-}
-
-.my-swipe {
-  margin-bottom: 4px;
-
-  img {
-    border-radius: 4px;
-  }
-}
-
-:deep(.van-swipe__indicator--active) {
-  width: 16px;
-  background: #fff;
-  border-radius: 16px;
-}
-
-.app_icon {
-  width: 42px;
-  height: 42px;
-  margin-bottom: 6px;
-}
-
-.app_title {
-  font-size: 12px;
-  color: #000;
-}
-</style>
+<script setup lang="ts">
+import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
+import { getImageUrl } from '@af-mobile-client-vue3/utils/common'
+import {
+  Grid as VanGrid,
+  GridItem as VanGridItem,
+  Swipe as VanSwipe,
+  SwipeItem as VanSwipeItem,
+} from 'vant/es'
+
+const apps = {
+  测试图标1: {
+    remark: '测试图标1',
+    icon: 'assets/img/apps/safe-check-web.png',
+  },
+  测试图标2: {
+    remark: '报装',
+    icon: 'assets/img/apps/apply-web.png',
+  },
+  测试图标3: {
+    remark: '营收',
+    icon: 'assets/img/apps/revenue-web.png',
+  },
+  测试图标4: {
+    remark: '物联网表',
+    icon: 'assets/img/apps/iot-web.png',
+  },
+}
+
+const images = [
+  '../assets/img/home/banner1.png',
+  '../assets/img/home/banner2.png',
+  '../assets/img/home/banner3.png',
+  '../assets/img/home/banner4.png',
+]
+
+interface Func {
+  link: string
+  navigate?: string
+  module: any
+  name: string
+  children?: Array<Func>
+}
+
+interface App {
+  module: Func
+  icon: string
+}
+
+function initAppMenu(func: Array<Func> | undefined) {
+  const functions = []
+  if (func && func.length > 0) {
+    for (let index = 0; index < func.length; index++) {
+      const module = func[index]
+      const app = apps[module.link]
+      if (app) {
+        functions.push({
+          module,
+          icon: app.icon,
+        })
+      }
+    }
+    return functions
+  }
+  return []
+}
+
+const appList: Array<App> = initAppMenu(useUserStore().getUserInfo().functions)
+console.warn(appList)
+</script>
+
+<template>
+  <div class="menu_main">
+    <VanSwipe class="my-swipe" :autoplay="3000" lazy-render>
+      <VanSwipeItem v-for="image in images" :key="image">
+        <img :src="getImageUrl(image)" width="100%" height="100%">
+      </VanSwipeItem>
+    </VanSwipe>
+    <VanGrid :border="false">
+      <VanGridItem v-for="app in appList" :key="app.module.link" :to="`app/${app.module.link}`">
+        <img class="app_icon" :src="getImageUrl(app.icon, '../')">
+        <span class="app_title">{{ app.module.name }}</span>
+      </VanGridItem>
+    </VanGrid>
+  </div>
+</template>
+
+<style scoped lang="less">
+.menu_main {
+  margin-bottom: var(--base-interval-2);
+}
+
+.my-swipe {
+  margin-bottom: 4px;
+
+  img {
+    border-radius: 4px;
+  }
+}
+
+:deep(.van-swipe__indicator--active) {
+  width: 16px;
+  background: #fff;
+  border-radius: 16px;
+}
+
+.app_icon {
+  width: 42px;
+  height: 42px;
+  margin-bottom: 6px;
+}
+
+.app_title {
+  font-size: 12px;
+  color: #000;
+}
+</style>