@liujitcn/kratos-uni-app-core 0.0.1

package/src/views/pages/login/protocal.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app'
+import { useSettingStore } from '../../../stores'
+import { ref } from 'vue'
+
+const settingStore = useSettingStore()
+const content = ref('')
+
+const protocolClassMap: Record<string, string> = {
+  h2: 'protocol-title',
+  h3: 'protocol-section-title',
+  h4: 'protocol-section-title',
+  p: 'protocol-paragraph',
+  ul: 'protocol-list',
+  ol: 'protocol-list',
+  li: 'protocol-list-item',
+  strong: 'protocol-emphasis',
+  b: 'protocol-emphasis',
+  a: 'protocol-link',
+  img: 'protocol-image',
+  blockquote: 'protocol-quote',
+}
+
+/** 为协议富文本节点补充统一类名，确保小程序端也能应用页面样式。 */
+const decorateProtocolContent = (html: string) => {
+  return html.replace(
+    /<(h2|h3|h4|p|ul|ol|li|strong|b|a|img|blockquote)(\s[^>]*)?>/gi,
+    (match, tagName: string, attrs = '') => {
+      const className = protocolClassMap[tagName.toLowerCase()]
+      if (!className) return match
+
+      const classAttribute = attrs.match(/\bclass\s*=\s*(["'])(.*?)\1/i)
+      if (classAttribute) {
+        const nextAttrs = attrs.replace(
+          classAttribute[0],
+          `class="${classAttribute[2]} ${className}"`,
+        )
+        return `<${tagName}${nextAttrs}>`
+      }
+
+      return `<${tagName} class="${className}"${attrs}>`
+    },
+  )
+}
+
+// 加载协议内容
+const loadProtocol = async (type?: string) => {
+  const isPrivacy = type === 'privacy'
+  const title = isPrivacy ? '隐私协议' : '服务条款'
+  const key = isPrivacy ? 'privacyProtocol' : 'serviceProtocol'
+
+  try {
+    await settingStore.loadData()
+    const protocol = settingStore.getData(key)
+    if (!protocol) {
+      throw new Error(`${title}未配置，暂时无法查看`)
+    }
+
+    await uni.setNavigationBarTitle({ title })
+    content.value = decorateProtocolContent(protocol)
+  } catch (error) {
+    await uni.showToast({
+      icon: 'none',
+      title: error instanceof Error ? error.message : '移动端配置加载失败',
+    })
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 300)
+  }
+}
+
+onLoad((query) => {
+  void loadProtocol(query?.type)
+})
+</script>
+<template>
+  <view class="protocol-page">
+    <view class="protocol-card">
+      <rich-text class="protocol-content" :nodes="content" />
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+page {
+  background-color: #f5f7f6;
+}
+
+.protocol-page {
+  min-height: 100vh;
+  padding: 24rpx;
+  box-sizing: border-box;
+}
+
+.protocol-card {
+  overflow: hidden;
+  padding: 40rpx 32rpx 56rpx;
+  border: 1rpx solid #edf1ef;
+  border-radius: 16rpx;
+  background-color: #fff;
+  box-shadow: 0 8rpx 24rpx rgba(33, 54, 48, 0.05);
+}
+
+.protocol-content {
+  display: block;
+  color: #53635d;
+  font-size: 28rpx;
+  line-height: 1.85;
+  word-break: break-word;
+}
+
+.protocol-content .protocol-title {
+  margin: 0 0 28rpx;
+  color: #1f2d29;
+  font-size: 42rpx;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.protocol-content .protocol-section-title {
+  margin: 38rpx 0 14rpx;
+  padding-left: 16rpx;
+  border-left: 6rpx solid #27ba9b;
+  color: #263a34;
+  font-size: 31rpx;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.protocol-content .protocol-paragraph {
+  margin: 0 0 22rpx;
+  color: #53635d;
+  font-size: 28rpx;
+  line-height: 1.85;
+}
+
+.protocol-content .protocol-paragraph:last-child {
+  margin-bottom: 0;
+}
+
+.protocol-content .protocol-list {
+  margin: 0 0 22rpx;
+  padding-left: 42rpx;
+}
+
+.protocol-content .protocol-list-item {
+  margin-bottom: 10rpx;
+  padding-left: 6rpx;
+  line-height: 1.8;
+}
+
+.protocol-content .protocol-emphasis {
+  color: #263a34;
+  font-weight: 600;
+}
+
+.protocol-content .protocol-link {
+  color: #16806d;
+  text-decoration: underline;
+}
+
+.protocol-content .protocol-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 24rpx auto;
+}
+
+.protocol-content .protocol-quote {
+  margin: 24rpx 0;
+  padding: 18rpx 22rpx;
+  border-left: 6rpx solid #b8e8dc;
+  color: #6c7b75;
+  background-color: #f3fbf8;
+}
+</style>

package/src/views/pages/status/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+import BootstrapStatus from '../../../components/BootstrapStatus.vue'
+import { initializeAppNavigation, launchAppStatus, navigateAppRoute } from '../../../navigation'
+import type { BootstrapViewKey } from '../../../module'
+
+const state = ref<BootstrapViewKey>('BOOTSTRAP_LOADING')
+const detail = ref('')
+const stateTitles: Record<BootstrapViewKey, string> = {
+  BOOTSTRAP_LOADING: '正在加载',
+  FORBIDDEN: '暂无访问权限',
+  NOT_FOUND: '页面不存在',
+  OFFLINE: '网络不可用',
+  CONFIG_ERROR: '导航配置无效',
+  PAGE_UNAVAILABLE: '页面暂不可用',
+}
+
+onLoad(async (options) => {
+  state.value = (options?.state as BootstrapViewKey | undefined) ?? 'BOOTSTRAP_LOADING'
+  detail.value = options?.detail ? decodeURIComponent(options.detail) : ''
+  if (options?.bootstrap !== '1') return
+  try {
+    await initializeAppNavigation()
+    navigateAppRoute(options?.route ? decodeURIComponent(options.route) : 'app/home', {
+      replace: true,
+    })
+  } catch (error) {
+    launchAppStatus('CONFIG_ERROR', error instanceof Error ? error.message : String(error))
+  }
+})
+</script>
+
+<template>
+  <BootstrapStatus :title="stateTitles[state]" :detail="detail" />
+</template>

package/src/views/pages/webview/webview.vue

@@ -0,0 +1,136 @@
+<template>
+  <view class="webview-container">
+    <!-- 小程序/APP 使用 web-view 组件 -->
+    <!-- #ifdef MP-WEIXIN || MP-ALIPAY || APP-PLUS -->
+    <web-view :src="url" @message="handleMessage"></web-view>
+    <!-- #endif -->
+
+    <!-- H5 直接跳转 -->
+    <!-- #ifdef H5 -->
+    <iframe
+      v-if="isH5 && url"
+      :src="url"
+      frameborder="0"
+      class="h5-iframe"
+      @load="handleIframeLoad"
+    ></iframe>
+    <!-- #endif -->
+
+    <view v-if="showFallback" class="webview-empty">
+      <view class="webview-empty__title">链接无法打开</view>
+      <view class="webview-empty__desc">{{ emptyDesc }}</view>
+    </view>
+
+    <!-- #ifdef H5 -->
+    <!-- X-Frame-Options 拒绝嵌入时浏览器仍可能触发 iframe load，始终保留外部打开入口。 -->
+    <button v-if="isH5 && url && isIframeTimedOut" class="webview-open-button" @tap="openInBrowser">
+      新窗口打开
+    </button>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+
+const url = ref('')
+const isH5 = ref(false)
+const isIframeLoaded = ref(false)
+const isIframeTimedOut = ref(false)
+
+const showFallback = computed(
+  () => !url.value || (isH5.value && isIframeTimedOut.value && !isIframeLoaded.value),
+)
+const emptyDesc = computed(() => {
+  if (!url.value) {
+    return '缺少有效链接地址'
+  }
+  return '当前 H5 页面可能被目标站点限制嵌入'
+})
+
+onLoad((query) => {
+  url.value = decodeURIComponent(query?.url || '')
+  const title = decodeURIComponent(query?.title || '')
+  // 调用方传入标题时同步更新原生导航栏，避免继续显示页面注册时的空标题。
+  if (title) {
+    void uni.setNavigationBarTitle({ title })
+  }
+
+  // #ifdef H5
+  isH5.value = true
+  // H5 iframe 可能被 X-Frame-Options 拦截，超时后展示明确兜底。
+  window.setTimeout(() => {
+    isIframeTimedOut.value = true
+  }, 800)
+  // #endif
+})
+
+/** 标记 H5 iframe 已完成加载，避免正常外链被兜底层遮挡。 */
+const handleIframeLoad = () => {
+  isIframeLoaded.value = true
+}
+
+/** H5 下外链被禁止嵌入时，允许用户用新窗口继续访问。 */
+const openInBrowser = () => {
+  if (!url.value) return
+  // #ifdef H5
+  window.open(url.value, '_blank', 'noopener,noreferrer')
+  // #endif
+}
+
+// 小程序接收消息
+const handleMessage = (e: any) => {
+  console.log('收到H5消息:', e.detail)
+}
+</script>
+
+<style scoped>
+.webview-container {
+  position: relative;
+  flex: 1;
+  height: 100vh;
+}
+.h5-iframe {
+  width: 100%;
+  height: 100vh;
+}
+
+.webview-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48rpx;
+  text-align: center;
+  background-color: #fff;
+}
+
+.webview-empty__title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+}
+
+.webview-empty__desc {
+  margin-top: 16rpx;
+  font-size: 26rpx;
+  color: #888;
+}
+
+.webview-open-button {
+  position: fixed;
+  right: 24rpx;
+  bottom: 96rpx;
+  z-index: 2;
+  width: 240rpx;
+  height: 72rpx;
+  line-height: 72rpx;
+  border-radius: 72rpx;
+  background-color: #27ba9b;
+  color: #fff;
+  font-size: 26rpx;
+}
+</style>