init
This commit is contained in:
93
pages/home/index.js
Normal file
93
pages/home/index.js
Normal file
@@ -0,0 +1,93 @@
|
||||
const { getRuntimeConfig } = require('../../config/env')
|
||||
const { sessionStore } = require('../../stores')
|
||||
const { maskToken } = require('../../utils/util')
|
||||
|
||||
const QUICK_ENTRIES = [
|
||||
{
|
||||
title: '登录主包',
|
||||
description: '演示主包内的认证入口、全局会话同步和基础 UI 组件封装。',
|
||||
badge: '主包',
|
||||
actionText: '打开登录页',
|
||||
actionPath: '/pages/login/index'
|
||||
},
|
||||
{
|
||||
title: '业务工作台',
|
||||
description: '演示分包页面，只在需要时加载，保持主包轻量和首页启动稳定。',
|
||||
badge: '分包',
|
||||
actionText: '进入工作台',
|
||||
actionPath: '/packages/demo/pages/workbench/index'
|
||||
}
|
||||
]
|
||||
|
||||
function buildSessionView(state) {
|
||||
const userName = state.userInfo?.nickname || state.userInfo?.name || '访客'
|
||||
|
||||
return {
|
||||
statusLabel: state.isLoggedIn ? '已登录' : '未登录',
|
||||
userName,
|
||||
tokenLabel: maskToken(state.token),
|
||||
permissionsLabel: state.permissions.length ? state.permissions.join(' / ') : '暂无权限'
|
||||
}
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
quickEntries: QUICK_ENTRIES,
|
||||
envName: '',
|
||||
apiBaseUrl: '',
|
||||
isLoggedIn: false,
|
||||
sessionView: buildSessionView(sessionStore.getState())
|
||||
},
|
||||
onLoad() {
|
||||
const runtimeConfig = getRuntimeConfig()
|
||||
|
||||
this.unsubscribe = sessionStore.subscribe(nextState => {
|
||||
this.syncSession(nextState)
|
||||
})
|
||||
|
||||
this.setData({
|
||||
envName: runtimeConfig.name.toUpperCase(),
|
||||
apiBaseUrl: runtimeConfig.baseURL
|
||||
})
|
||||
this.syncSession(sessionStore.getState())
|
||||
},
|
||||
onUnload() {
|
||||
this.unsubscribe?.()
|
||||
},
|
||||
syncSession(state) {
|
||||
this.setData({
|
||||
isLoggedIn: state.isLoggedIn,
|
||||
sessionView: buildSessionView(state)
|
||||
})
|
||||
},
|
||||
handlePrimaryAction() {
|
||||
if (this.data.isLoggedIn) {
|
||||
wx.navigateTo({
|
||||
url: '/packages/demo/pages/workbench/index'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
wx.navigateTo({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
},
|
||||
handleLogout() {
|
||||
sessionStore.clearSession()
|
||||
wx.showToast({
|
||||
title: '已清理登录态',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
handleEntryAction(event) {
|
||||
const { path } = event.detail
|
||||
|
||||
if (!path) {
|
||||
return
|
||||
}
|
||||
|
||||
wx.navigateTo({
|
||||
url: path
|
||||
})
|
||||
}
|
||||
})
|
||||
7
pages/home/index.json
Normal file
7
pages/home/index.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "首页",
|
||||
"usingComponents": {
|
||||
"app-button": "../../components/base/app-button/index",
|
||||
"entry-card": "../../components/biz/entry-card/index"
|
||||
}
|
||||
}
|
||||
65
pages/home/index.wxml
Normal file
65
pages/home/index.wxml
Normal file
@@ -0,0 +1,65 @@
|
||||
<view class="page-shell">
|
||||
<view class="panel hero">
|
||||
<text class="hero__eyebrow">Stable Native Architecture</text>
|
||||
<text class="hero__title">玄志小程序基础骨架</text>
|
||||
<text class="hero__summary">
|
||||
原生小程序 + JS + npm + TDesign + 分包 + service/store 分层，保留微信原生性能和长期维护边界。
|
||||
</text>
|
||||
<app-button
|
||||
block
|
||||
text="{{isLoggedIn ? '进入业务工作台' : '前往登录页'}}"
|
||||
bind:tap="handlePrimaryAction"
|
||||
></app-button>
|
||||
<app-button
|
||||
wx:if="{{isLoggedIn}}"
|
||||
block
|
||||
text="清理登录态"
|
||||
theme="default"
|
||||
variant="outline"
|
||||
bind:tap="handleLogout"
|
||||
></app-button>
|
||||
</view>
|
||||
|
||||
<view class="panel session-card">
|
||||
<text class="section-title">当前会话</text>
|
||||
<view class="session-card__rows">
|
||||
<view class="meta-row">
|
||||
<text class="session-card__label">运行环境</text>
|
||||
<text class="session-card__value">{{envName}}</text>
|
||||
</view>
|
||||
<view class="meta-row">
|
||||
<text class="session-card__label">API 地址</text>
|
||||
<text class="session-card__value session-card__value--mono">{{apiBaseUrl}}</text>
|
||||
</view>
|
||||
<view class="meta-row">
|
||||
<text class="session-card__label">登录状态</text>
|
||||
<text class="session-card__value">{{sessionView.statusLabel}}</text>
|
||||
</view>
|
||||
<view class="meta-row">
|
||||
<text class="session-card__label">当前用户</text>
|
||||
<text class="session-card__value">{{sessionView.userName}}</text>
|
||||
</view>
|
||||
<view class="meta-row">
|
||||
<text class="session-card__label">Token</text>
|
||||
<text class="session-card__value session-card__value--mono">{{sessionView.tokenLabel}}</text>
|
||||
</view>
|
||||
<view class="meta-row meta-row--top">
|
||||
<text class="session-card__label">权限</text>
|
||||
<text class="session-card__value session-card__value--mono">{{sessionView.permissionsLabel}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="entry-list">
|
||||
<entry-card
|
||||
wx:for="{{quickEntries}}"
|
||||
wx:key="actionPath"
|
||||
title="{{item.title}}"
|
||||
description="{{item.description}}"
|
||||
badge="{{item.badge}}"
|
||||
actionText="{{item.actionText}}"
|
||||
actionPath="{{item.actionPath}}"
|
||||
bind:action="handleEntryAction"
|
||||
></entry-card>
|
||||
</view>
|
||||
</view>
|
||||
68
pages/home/index.wxss
Normal file
68
pages/home/index.wxss
Normal file
@@ -0,0 +1,68 @@
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
padding: 36rpx 32rpx;
|
||||
background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.hero__eyebrow {
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero__summary {
|
||||
font-size: 26rpx;
|
||||
line-height: 1.8;
|
||||
color: rgba(248, 250, 252, 0.8);
|
||||
}
|
||||
|
||||
.session-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.session-card__rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.session-card__label {
|
||||
flex-shrink: 0;
|
||||
font-size: 24rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.session-card__value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.session-card__value--mono {
|
||||
font-family: 'Cascadia Code', 'Courier New', monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.entry-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.meta-row--top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
75
pages/login/index.js
Normal file
75
pages/login/index.js
Normal file
@@ -0,0 +1,75 @@
|
||||
const { sessionStore } = require('../../stores')
|
||||
const { formatDateTime } = require('../../utils/util')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
submitting: false,
|
||||
form: {
|
||||
nickname: '',
|
||||
mobile: ''
|
||||
},
|
||||
mockHint: `请求层已接好，可把接口替换为真实后端。当前时间：${formatDateTime(new Date())}`
|
||||
},
|
||||
handleNicknameChange(event) {
|
||||
this.setData({
|
||||
'form.nickname': event.detail.value
|
||||
})
|
||||
},
|
||||
handleMobileChange(event) {
|
||||
this.setData({
|
||||
'form.mobile': event.detail.value
|
||||
})
|
||||
},
|
||||
handleMockLogin() {
|
||||
const { nickname, mobile } = this.data.form
|
||||
|
||||
if (!nickname.trim()) {
|
||||
wx.showToast({
|
||||
title: '请输入昵称',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.setData({
|
||||
submitting: true
|
||||
})
|
||||
|
||||
sessionStore.setSession({
|
||||
token: `mock_${Date.now()}`,
|
||||
userInfo: {
|
||||
nickname: nickname.trim(),
|
||||
mobile: mobile.trim()
|
||||
},
|
||||
permissions: ['workbench:view', 'profile:update']
|
||||
})
|
||||
|
||||
wx.showToast({
|
||||
title: '模拟登录成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
this.setData({
|
||||
submitting: false
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
wx.reLaunch({
|
||||
url: '/pages/home/index'
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
handleClearSession() {
|
||||
sessionStore.clearSession()
|
||||
this.setData({
|
||||
form: {
|
||||
nickname: '',
|
||||
mobile: ''
|
||||
}
|
||||
})
|
||||
wx.showToast({
|
||||
title: '已清理',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
8
pages/login/index.json
Normal file
8
pages/login/index.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "登录",
|
||||
"usingComponents": {
|
||||
"app-button": "../../components/base/app-button/index",
|
||||
"t-input": "tdesign-miniprogram/input/input",
|
||||
"t-tag": "tdesign-miniprogram/tag/tag"
|
||||
}
|
||||
}
|
||||
39
pages/login/index.wxml
Normal file
39
pages/login/index.wxml
Normal file
@@ -0,0 +1,39 @@
|
||||
<view class="page-shell">
|
||||
<view class="panel login-hero">
|
||||
<t-tag theme="primary" variant="light">Mock Auth</t-tag>
|
||||
<text class="login-hero__title">主包认证入口</text>
|
||||
<text class="section-copy">{{mockHint}}</text>
|
||||
</view>
|
||||
|
||||
<view class="panel login-form">
|
||||
<text class="section-title">登录信息</text>
|
||||
<t-input
|
||||
label="昵称"
|
||||
clearable
|
||||
placeholder="请输入昵称"
|
||||
value="{{form.nickname}}"
|
||||
bind:change="handleNicknameChange"
|
||||
></t-input>
|
||||
<t-input
|
||||
label="手机号"
|
||||
clearable
|
||||
type="number"
|
||||
placeholder="选填"
|
||||
value="{{form.mobile}}"
|
||||
bind:change="handleMobileChange"
|
||||
></t-input>
|
||||
<app-button
|
||||
block
|
||||
text="写入会话并返回首页"
|
||||
loading="{{submitting}}"
|
||||
bind:tap="handleMockLogin"
|
||||
></app-button>
|
||||
<app-button
|
||||
block
|
||||
text="清理本地会话"
|
||||
theme="default"
|
||||
variant="outline"
|
||||
bind:tap="handleClearSession"
|
||||
></app-button>
|
||||
</view>
|
||||
</view>
|
||||
19
pages/login/index.wxss
Normal file
19
pages/login/index.wxss
Normal file
@@ -0,0 +1,19 @@
|
||||
.login-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.login-hero__title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user