minitest2.0 0.0.0

package/src/components/AppTitleBar.vue

@@ -0,0 +1,376 @@
+<script setup lang="ts">
+import { closeWindow, hideWebViewTitle } from '@/core/mxApi'
+
+defineOptions({ name: 'AppTitleBar' })
+
+withDefaults(
+  defineProps<{
+    title?: string
+    showBack?: boolean
+    backAriaLabel?: string
+  }>(),
+  {
+    title: '公告',
+    showBack: true,
+    backAriaLabel: '返回',
+  },
+)
+
+const emit = defineEmits<{
+  back: []
+  capsuleMore: []
+  capsuleClose: []
+  menuHome: []
+  menuSettings: []
+}>()
+
+const capsuleMenuOpen = ref(false)
+const capsuleMenuRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  hideWebViewTitle()
+  document.addEventListener('pointerdown', handleDocumentPointerDown)
+  document.addEventListener('keydown', handleDocumentKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', handleDocumentPointerDown)
+  document.removeEventListener('keydown', handleDocumentKeydown)
+})
+
+function handleCapsuleClose() {
+  closeCapsuleMenu()
+  emit('capsuleClose')
+  closeWindow()
+}
+
+function toggleCapsuleMenu() {
+  capsuleMenuOpen.value = !capsuleMenuOpen.value
+  emit('capsuleMore')
+}
+
+function closeCapsuleMenu() {
+  capsuleMenuOpen.value = false
+}
+
+function handleMenuHome() {
+  closeCapsuleMenu()
+  emit('menuHome')
+}
+
+function handleMenuSettings() {
+  closeCapsuleMenu()
+  emit('menuSettings')
+}
+
+function handleDocumentPointerDown(event: PointerEvent) {
+  const target = event.target
+
+  if (!(target instanceof Node) || capsuleMenuRef.value?.contains(target)) {
+    return
+  }
+
+  closeCapsuleMenu()
+}
+
+function handleDocumentKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeCapsuleMenu()
+  }
+}
+</script>
+
+<template>
+  <header class="app-title-bar">
+    <div class="app-title-bar__inner">
+      <button
+        v-if="showBack"
+        class="app-title-bar__back"
+        type="button"
+        :aria-label="backAriaLabel"
+        @click="emit('back')"
+      >
+        <van-icon name="arrow-left" />
+      </button>
+
+      <h1 class="app-title-bar__title">{{ title }}</h1>
+
+      <div ref="capsuleMenuRef" class="app-title-bar__capsule-area">
+        <div class="app-title-bar__capsule" role="group" aria-label="页面操作">
+          <button
+            class="app-title-bar__capsule-btn"
+            type="button"
+            aria-label="更多"
+            aria-haspopup="menu"
+            :aria-expanded="capsuleMenuOpen"
+            @click="toggleCapsuleMenu"
+          >
+            <span class="app-title-bar__dots" aria-hidden="true">
+              <i></i>
+              <i></i>
+              <i></i>
+            </span>
+          </button>
+          <span class="app-title-bar__divider" aria-hidden="true"></span>
+          <button
+            class="app-title-bar__capsule-btn"
+            type="button"
+            aria-label="关闭"
+            @click="handleCapsuleClose"
+          >
+            <span class="app-title-bar__circle" aria-hidden="true"></span>
+          </button>
+        </div>
+
+        <transition name="app-title-bar-menu">
+          <div v-if="capsuleMenuOpen" class="app-title-bar__menu" role="menu" aria-label="更多菜单">
+            <button
+              class="app-title-bar__menu-item"
+              type="button"
+              role="menuitem"
+              @click="handleMenuHome"
+            >
+              <van-icon name="wap-home-o" />
+              <span>回到首页</span>
+            </button>
+            <button
+              class="app-title-bar__menu-item"
+              type="button"
+              role="menuitem"
+              @click="handleMenuSettings"
+            >
+              <van-icon name="setting-o" />
+              <span>设置</span>
+            </button>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.app-title-bar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  width: 100%;
+  height: calc(50px + env(safe-area-inset-top));
+  padding-top: env(safe-area-inset-top);
+  border-bottom: 1px solid #f0f1f3;
+  color: #171b20;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.app-title-bar__inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 750px;
+  height: 50px;
+  margin: 0 auto;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.app-title-bar__back,
+.app-title-bar__capsule-btn {
+  border: 0;
+  padding: 0;
+  font: inherit;
+  background: transparent;
+  appearance: none;
+  cursor: pointer;
+}
+
+.app-title-bar__back {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  color: #171b20;
+  font-size: 22px;
+  transform: translateY(-50%);
+}
+
+.app-title-bar__back:active {
+  background: rgba(23, 27, 32, 0.06);
+}
+
+.app-title-bar__title {
+  position: absolute;
+  left: 106px;
+  right: 106px;
+  margin: 0;
+  overflow: hidden;
+  color: #171b20;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.app-title-bar__capsule-area {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  z-index: 2;
+  width: 88px;
+  transform: translateY(-50%);
+}
+
+.app-title-bar__capsule {
+  display: flex;
+  align-items: center;
+  width: 88px;
+  height: 32px;
+  overflow: hidden;
+  border: 1px solid rgba(23, 27, 32, 0.12);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow:
+    0 6px 18px rgba(23, 27, 32, 0.08),
+    inset 0 0 0 0.5px rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(10px);
+}
+
+.app-title-bar__capsule-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 43px;
+  height: 100%;
+  color: #171b20;
+}
+
+.app-title-bar__capsule-btn:active {
+  background: rgba(23, 27, 32, 0.06);
+}
+
+.app-title-bar__divider {
+  width: 1px;
+  height: 18px;
+  background: rgba(23, 27, 32, 0.12);
+}
+
+.app-title-bar__dots {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.app-title-bar__dots i {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #171b20;
+}
+
+.app-title-bar__circle {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #171b20;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+
+.app-title-bar__circle::after {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #171b20;
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.app-title-bar__menu {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  width: 126px;
+  padding: 6px;
+  border: 1px solid rgba(23, 27, 32, 0.08);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 12px 28px rgba(23, 27, 32, 0.14);
+  box-sizing: border-box;
+  transform-origin: 78px 0;
+}
+
+.app-title-bar__menu::before {
+  position: absolute;
+  top: -5px;
+  right: 58px;
+  width: 10px;
+  height: 10px;
+  border-top: 1px solid rgba(23, 27, 32, 0.08);
+  border-left: 1px solid rgba(23, 27, 32, 0.08);
+  background: #ffffff;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.app-title-bar__menu-item {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 40px;
+  border: 0;
+  border-radius: 6px;
+  padding: 0 10px;
+  color: #171b20;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  white-space: nowrap;
+  background: transparent;
+  appearance: none;
+  cursor: pointer;
+}
+
+.app-title-bar__menu-item:active {
+  background: rgba(242, 47, 61, 0.08);
+}
+
+.app-title-bar__menu-item + .app-title-bar__menu-item {
+  margin-top: 2px;
+}
+
+.app-title-bar-menu-enter-active,
+.app-title-bar-menu-leave-active {
+  transition:
+    opacity 0.14s ease,
+    transform 0.14s ease;
+}
+
+.app-title-bar-menu-enter-from,
+.app-title-bar-menu-leave-to {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+}
+
+@media (max-width: 360px) {
+  .app-title-bar__title {
+    left: 58px;
+    right: 106px;
+  }
+}
+</style>

package/src/components.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppTitleBar: typeof import('./components/AppTitleBar.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanDatePicker: typeof import('vant/es')['DatePicker']
+    VanEmpty: typeof import('vant/es')['Empty']
+    VanField: typeof import('vant/es')['Field']
+    VanForm: typeof import('vant/es')['Form']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanList: typeof import('vant/es')['List']
+    VanLoading: typeof import('vant/es')['Loading']
+    VanPopup: typeof import('vant/es')['Popup']
+    VanSearch: typeof import('vant/es')['Search']
+    VanSwitch: typeof import('vant/es')['Switch']
+    VanTabbar: typeof import('vant/es')['Tabbar']
+    VanTabbarItem: typeof import('vant/es')['TabbarItem']
+  }
+}

package/src/config/config.properties

@@ -0,0 +1,3 @@
+hideWebViewTitle=false;
+hideOptionMenu=true;
+hideToolbar=true;

package/src/config/env.ts

@@ -0,0 +1,6 @@
+export const appEnv = import.meta.env.VITE_APP_ENV
+
+export const apiConfig = {
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: Number(import.meta.env.VITE_API_TIMEOUT) || 10000,
+}

package/src/config/plugin.properties.pro

@@ -0,0 +1,6 @@
+app_id=vue_demo;
+version_code=10000;
+version_name=1.0.0.00;
+type=html5;
+frame=vue;
+platform=[mac,win,ios,android];

package/src/config/plugin.properties.test

@@ -0,0 +1,6 @@
+app_id=vue_demo;
+version_code=10002;
+version_name=1.0.0.02;
+type=html5;
+frame=vue;
+platform=[mac,win,ios,android];