mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-22 13:05:18 +00:00
feat(页面): 重写关于我们和常见问题页面
重构关于我们页面，新增品牌展示区域、技术栈展示和资源链接 重写常见问题页面，新增技术支持卡片、FAQ列表和功能指南 优化网络测试功能，在H5环境下使用window.open打开链接 添加多个Wot Design组件到组件声明文件
This commit is contained in:
zhangtao
@@ -1,96 +1,393 @@
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<wd-navbar title="关于我们" left-arrow @click-left="handleBack" />
|
||||
<wd-navbar
|
||||
title="关于我们"
|
||||
left-arrow
|
||||
safe-area-inset-top
|
||||
placeholder
|
||||
@click-left="handleBack"
|
||||
/>
|
||||
|
||||
<!-- 顶部信息区域 -->
|
||||
<wd-card custom-style="margin-top: 20rpx">
|
||||
<view class="flex items-center p-2">
|
||||
<wd-img width="60px" height="60px" src="/static/logo.png" mode="aspectFit" class="mr-4" />
|
||||
<view class="flex-1">
|
||||
<text class="text-lg font-bold block mb-1">vue-uniapp-template</text>
|
||||
<text class="text-xs text-gray-500">版本 {{ version }}</text>
|
||||
<!-- 顶部品牌区域 -->
|
||||
<view class="brand-section">
|
||||
<view class="brand-content">
|
||||
<wd-img
|
||||
:src="webLogo"
|
||||
:width="120"
|
||||
:height="120"
|
||||
round
|
||||
custom-class="brand-logo"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="brand-info">
|
||||
<view class="brand-title-wrapper">
|
||||
<text class="brand-title">{{ webTitle }}</text>
|
||||
<wd-tag type="primary" size="small" plain custom-class="version-tag">
|
||||
v{{ version }}
|
||||
</wd-tag>
|
||||
</view>
|
||||
<text class="brand-subtitle">{{ webDescription }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
|
||||
<!-- 公司信息区域 -->
|
||||
<wd-card custom-style="margin-top: 20rpx">
|
||||
<view class="p-4">
|
||||
<view class="flex items-center mb-3">
|
||||
<wd-icon name="company" size="18" class="mr-2" />
|
||||
<text class="text-base font-medium">有来开源组织</text>
|
||||
<!-- 技术栈 -->
|
||||
<view class="section">
|
||||
<wd-card title="技术栈" custom-style="margin: 20rpx;">
|
||||
<view class="tech-stack-container">
|
||||
<view class="tech-category">
|
||||
<view class="category-title">
|
||||
<wd-icon name="computer" size="24" color="#409eff" />
|
||||
<text class="category-text">前端技术</text>
|
||||
</view>
|
||||
<wd-grid :column="4" clickable custom-class="tech-grid">
|
||||
<wd-grid-item
|
||||
v-for="tech in frontendTechs"
|
||||
:key="tech.name"
|
||||
:icon="tech.icon"
|
||||
:text="tech.name"
|
||||
/>
|
||||
</wd-grid>
|
||||
</view>
|
||||
|
||||
<view class="tech-category">
|
||||
<view class="category-title">
|
||||
<wd-icon name="server" size="24" color="#52c41a" />
|
||||
<text class="category-text">后端技术</text>
|
||||
</view>
|
||||
<wd-grid :column="4" clickable custom-class="tech-grid">
|
||||
<wd-grid-item
|
||||
v-for="tech in backendTechs"
|
||||
:key="tech.name"
|
||||
:icon="tech.icon"
|
||||
:text="tech.name"
|
||||
/>
|
||||
</wd-grid>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
|
||||
<!-- 资源链接 -->
|
||||
<view class="section">
|
||||
<wd-card title="资源链接" custom-style="margin: 20rpx;">
|
||||
<wd-cell-group>
|
||||
<wd-cell title="帮助文档" label="查看完整开发文档" is-link @click="openLink(helpDoc)">
|
||||
<template #icon>
|
||||
<view class="link-icon-wrapper doc">
|
||||
<wd-icon name="document" size="28" color="#409eff" />
|
||||
</view>
|
||||
</template>
|
||||
</wd-cell>
|
||||
<wd-cell title="用户协议" label="了解使用条款" is-link @click="openLink(webClause)">
|
||||
<template #icon>
|
||||
<view class="link-icon-wrapper agreement">
|
||||
<wd-icon name="agreement" size="28" color="#52c41a" />
|
||||
</view>
|
||||
</template>
|
||||
</wd-cell>
|
||||
<wd-cell title="隐私政策" label="保护您的隐私" is-link @click="openLink(webPrivacy)">
|
||||
<template #icon>
|
||||
<view class="link-icon-wrapper privacy">
|
||||
<wd-icon name="privacy" size="28" color="#faad14" />
|
||||
</view>
|
||||
</template>
|
||||
</wd-cell>
|
||||
<wd-cell title="开源代码" label="访问GitHub仓库" is-link @click="openLink(gitCode)">
|
||||
<template #icon>
|
||||
<view class="link-icon-wrapper github">
|
||||
<wd-icon name="github" size="28" color="#333" />
|
||||
</view>
|
||||
</template>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
</wd-card>
|
||||
</view>
|
||||
|
||||
<!-- 版权信息 -->
|
||||
<view class="copyright-section">
|
||||
<wd-divider content-position="center" custom-style="margin: 40rpx 0;">
|
||||
<text class="divider-text">版权信息</text>
|
||||
</wd-divider>
|
||||
<view class="copyright-content">
|
||||
<view class="copyright-card">
|
||||
<wd-icon name="copyright" size="32" color="#909399" />
|
||||
<text class="copyright-text">{{ copyright }}</text>
|
||||
<text class="record-text">{{ keepRecord }}</text>
|
||||
<view class="copyright-links">
|
||||
<text class="copyright-link" @click="openLink(webClause)">用户协议</text>
|
||||
<text class="copyright-separator">|</text>
|
||||
<text class="copyright-link" @click="openLink(webPrivacy)">隐私政策</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="text-sm text-gray-500 block pl-6">专注于快速构建和高效开发的应用解决方案</text>
|
||||
</view>
|
||||
</wd-card>
|
||||
|
||||
<!-- 项目列表 -->
|
||||
<wd-card title="优质项目" custom-style="margin-top: 20rpx">
|
||||
<wd-cell-group border>
|
||||
<wd-cell title="vue3-element-admin" icon="desktop">
|
||||
<view slot="label" class="text-xs text-gray-500 mt-1">
|
||||
基于 Vue3 + Vite5 + TypeScript5 + Element-Plus + Pinia 构建的中后台管理模板
|
||||
</view>
|
||||
</wd-cell>
|
||||
|
||||
<wd-cell title="vue-uniapp-template" icon="mobile">
|
||||
<view slot="label" class="text-xs text-gray-500 mt-1">
|
||||
基于 uni-app + Vue 3 + TypeScript，集成多种工具的移动端应用模板
|
||||
</view>
|
||||
</wd-cell>
|
||||
|
||||
<wd-cell title="youlai-boot" icon="server">
|
||||
<view slot="label" class="text-xs text-gray-500 mt-1">
|
||||
基于 Spring Boot 3 + Vue 3 构建的前后端分离单体权限管理系统
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
</wd-card>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<wd-card title="联系我们" custom-style="margin-top: 20rpx">
|
||||
<wd-cell-group border>
|
||||
<wd-cell title="官方网站" value="www.youlai.tech" icon="link" />
|
||||
<wd-cell title="GitHub" value="github.com/youlaitech" icon="github" />
|
||||
<wd-cell title="联系邮箱" value="youlaitech@163.com" icon="mail" />
|
||||
</wd-cell-group>
|
||||
</wd-card>
|
||||
|
||||
<!-- 底部版权信息 -->
|
||||
<view class="text-center py-4">
|
||||
<text class="block text-xs text-gray-400">Copyright © {{ getYear() }} 有来开源组织</text>
|
||||
<text class="block text-xs text-gray-400 mt-1">All Rights Reserved</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const version = ref("1.0.0");
|
||||
import { ref } from "vue";
|
||||
|
||||
// 系统配置数据
|
||||
const webTitle = ref("FastAPI Vue3 Admin");
|
||||
const webDescription = ref("FastAPI Vue3 Admin 是完全开源的权限管理系统");
|
||||
const version = ref("2.0.0");
|
||||
const keepRecord = ref("陕ICP备2025069493号-1");
|
||||
const copyright = ref("Copyright © 2025-2026 service.fastapiadmin.com 版权所有");
|
||||
const webLogo = ref("http://service.fastapiadmin.com/api/v1/static/image/logo.png");
|
||||
const helpDoc = ref("http://service.fastapiadmin.com/docs/index.html");
|
||||
const webClause = ref("https://github.com/1014TaoTao/fastapi_vue3_admin/blob/master/LICENSE");
|
||||
const webPrivacy = ref("https://github.com/1014TaoTao/fastapi_vue3_admin/blob/master/LICENSE");
|
||||
const gitCode = ref("https://github.com/1014TaoTao/fastapi_vue3_admin.git");
|
||||
|
||||
// 技术栈数据
|
||||
const frontendTechs = ref([
|
||||
{ name: "Vue 3", icon: "code", color: "#4fc08d" },
|
||||
{ name: "TypeScript", icon: "code", color: "#3178c6" },
|
||||
{ name: "Wot Design", icon: "code", color: "#409eff" },
|
||||
{ name: "uni-app", icon: "code", color: "#007aff" },
|
||||
]);
|
||||
|
||||
const backendTechs = ref([
|
||||
{ name: "FastAPI", icon: "link", color: "#009688" },
|
||||
{ name: "Python", icon: "code", color: "#3776ab" },
|
||||
{ name: "MySQL", icon: "code", color: "#4479a1" },
|
||||
{ name: "Redis", icon: "code", color: "#dc382d" },
|
||||
]);
|
||||
|
||||
const handleBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const getYear = () => {
|
||||
return new Date().getFullYear();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// #ifdef MP-WEIXIN
|
||||
version.value = uni.getSystemInfoSync().appVersion;
|
||||
const openLink = (url: string) => {
|
||||
// #ifdef H5
|
||||
window.open(url, "_blank");
|
||||
// #endif
|
||||
});
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.openURL(url);
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.setClipboardData({
|
||||
data: url,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: "链接已复制",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.wd-card__header) {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: var(--wot-color-text, #333);
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 40rpx;
|
||||
background: var(--wot-color-bg-secondary);
|
||||
}
|
||||
|
||||
:deep(.wd-cell__icon) {
|
||||
.brand-section {
|
||||
padding: 60rpx 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.brand-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.brand-info {
|
||||
margin-top: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 36rpx;
|
||||
color: var(--wot-color-theme, #409eff);
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.copyright-section {
|
||||
padding: 0 32rpx;
|
||||
margin-top: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.copyright-content {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.copyright-card {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
background: var(--wot-color-bg);
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
margin: 20rpx 0 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
|
||||
.record-text {
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--wot-color-text-secondary);
|
||||
}
|
||||
|
||||
.divider-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
|
||||
.copyright-links {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.copyright-link {
|
||||
font-size: 24rpx;
|
||||
color: var(--wot-color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.copyright-separator {
|
||||
font-size: 24rpx;
|
||||
color: var(--wot-color-text-third);
|
||||
}
|
||||
|
||||
:deep(.wd-grid-item__content) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.wd-cell__left) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.architecture-detail {
|
||||
padding: 0 24rpx;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
flex-shrink: 0;
|
||||
margin-right: 16rpx;
|
||||
font-weight: 600;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
color: var(--wot-color-text-secondary);
|
||||
}
|
||||
|
||||
:deep(.architecture-grid) {
|
||||
margin: 24rpx;
|
||||
}
|
||||
|
||||
.tech-stack-container {
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.tech-category {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.category-text {
|
||||
margin-left: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
|
||||
:deep(.tech-grid) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.wd-cell__body) {
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
|
||||
:deep(.wd-cell__title) {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
|
||||
:deep(.wd-cell__label) {
|
||||
margin-top: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: var(--wot-color-text-secondary);
|
||||
}
|
||||
|
||||
.link-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.link-icon-wrapper.doc {
|
||||
background: linear-gradient(135deg, #409eff, #66b1ff);
|
||||
}
|
||||
|
||||
.link-icon-wrapper.agreement {
|
||||
background: linear-gradient(135deg, #52c41a, #73d13d);
|
||||
}
|
||||
|
||||
.link-icon-wrapper.privacy {
|
||||
background: linear-gradient(135deg, #faad14, #ffc53d);
|
||||
}
|
||||
|
||||
.link-icon-wrapper.github {
|
||||
background: linear-gradient(135deg, #333, #666);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,153 +1,584 @@
|
||||
<template>
|
||||
<view class="faq-container">
|
||||
<view class="wechat">
|
||||
<view class="tips">
|
||||
<text>长按关注「有来技术」公众号，获取交流群二维码。</text>
|
||||
</view>
|
||||
<view class="flex-center">
|
||||
<image
|
||||
class="w-158px h-158px"
|
||||
:show-menu-by-longpress="true"
|
||||
src="/static/images/qrcode-official.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<view>
|
||||
<text>如果交流群的二维码过期，请加微信(</text>
|
||||
<text :user-select="true" :selectable="true">haoxianrui</text>
|
||||
<text>)并备注「前端」、「后端」或「全栈」以获取最新二维码。</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>为确保交流群质量，防止营销广告人群混入，我们采取了此措施。望各位理解！</text>
|
||||
</view>
|
||||
</view>
|
||||
<wd-navbar
|
||||
title="常见问题"
|
||||
left-arrow
|
||||
safe-area-inset-top
|
||||
placeholder
|
||||
@click-left="handleBack"
|
||||
/>
|
||||
|
||||
<wd-collapse v-model="value">
|
||||
<wd-collapse-item title="开源项目issues" name="item1">
|
||||
<!-- #ifdef H5 -->
|
||||
<a href="https://gitee.com/youlaiorg/vue-uniapp-template/issues">#issues</a>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<text :user-select="true">https://gitee.com/youlaiorg/vue-uniapp-template/issues</text>
|
||||
<!-- #endif -->
|
||||
</wd-collapse-item>
|
||||
<wd-collapse-item title="小程序分包" name="item2">
|
||||
<view>
|
||||
<text>
|
||||
分包主要是因为小程序平台对主包大小有限制（微信小程序的规则是主包不超过2M，每个分包不超过2M，总体积一共不能超过20M），
|
||||
分包不需要按照业务模块来分，可以将多个业务模块放入一个分包中，直到这个分包达到小程序的大小限制才考虑下一个分包。
|
||||
uniapp的用法与微信官方文档一样，具体参见：
|
||||
</text>
|
||||
<!-- #ifdef H5 -->
|
||||
<a
|
||||
href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html"
|
||||
>
|
||||
微信官方文档-分包
|
||||
</a>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<text :user-select="true" :selectable="true">
|
||||
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
<scroll-view class="content-scroll" scroll-y :scroll-top="scrollTop" @scroll="handleScroll">
|
||||
<view class="content-wrapper">
|
||||
<!-- 技术支持卡片 -->
|
||||
<view class="support-card">
|
||||
<view class="card-header">
|
||||
<wd-icon name="service" size="48rpx" color="#0083f0" />
|
||||
<text class="card-title">技术支持</text>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<text class="card-desc">专业的技术团队为您提供7×24小时服务支持</text>
|
||||
<view class="support-grid">
|
||||
<view class="support-item" @tap="handleContact('email')">
|
||||
<view class="support-icon">
|
||||
<wd-icon name="email" size="40rpx" color="#0083f0" />
|
||||
</view>
|
||||
<view class="support-info">
|
||||
<text class="support-label">邮箱支持</text>
|
||||
<text class="support-value" user-select>support@example.com</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="support-item" @tap="handleContact('phone')">
|
||||
<view class="support-icon">
|
||||
<wd-icon name="phone" size="40rpx" color="#0083f0" />
|
||||
</view>
|
||||
<view class="support-info">
|
||||
<text class="support-label">客服热线</text>
|
||||
<text class="support-value">400-123-4567</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="support-item">
|
||||
<view class="support-icon">
|
||||
<wd-icon name="clock" size="40rpx" color="#0083f0" />
|
||||
</view>
|
||||
<view class="support-info">
|
||||
<text class="support-label">服务时间</text>
|
||||
<text class="support-value">工作日 9:00-18:00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-15rpx">
|
||||
<text>
|
||||
以下是一个简单示例。以下示例中创建了两个分包，分包a中包含两个页面，分包b中包含一个页面。
|
||||
</text>
|
||||
<text class="mt-15rpx">
|
||||
请注意，如果想把分包页面中使用的组件打包到分包中，则需要将组件放入对应的分包目录下，否则组件会被打包到主包中。
|
||||
</text>
|
||||
|
||||
<!-- FAQ内容区域 -->
|
||||
<view class="faq-section">
|
||||
<wd-collapse v-model="activeNames" accordion>
|
||||
<wd-collapse-item title="常见问题" name="faq">
|
||||
<view class="faq-list">
|
||||
<view
|
||||
v-for="(item, index) in faqList"
|
||||
:key="index"
|
||||
class="faq-item"
|
||||
:class="{ 'active': currentFaq === index }"
|
||||
@tap="toggleFaq(index)"
|
||||
>
|
||||
<view class="faq-header">
|
||||
<view class="faq-question">
|
||||
<wd-icon name="question-filled" size="28rpx" color="#ff9500" />
|
||||
<text class="question-text">{{ item.question }}</text>
|
||||
</view>
|
||||
<wd-icon
|
||||
name="arrow-down-bold"
|
||||
size="24rpx"
|
||||
color="#999"
|
||||
:custom-class="currentFaq === index ? 'rotate-180' : ''"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="currentFaq === index" class="faq-answer">
|
||||
<text class="answer-text">{{ item.answer }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-collapse-item>
|
||||
|
||||
<wd-collapse-item title="系统功能" name="features">
|
||||
<view class="feature-list">
|
||||
<view
|
||||
v-for="(feature, index) in featureList"
|
||||
:key="index"
|
||||
class="feature-item"
|
||||
>
|
||||
<view class="feature-icon">
|
||||
<wd-icon :name="feature.icon" size="48rpx" :color="feature.color" />
|
||||
</view>
|
||||
<view class="feature-content">
|
||||
<text class="feature-name">{{ feature.name }}</text>
|
||||
<text class="feature-desc">{{ feature.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-collapse-item>
|
||||
|
||||
<wd-collapse-item title="使用指南" name="guide">
|
||||
<view class="guide-section">
|
||||
<view class="guide-header">
|
||||
<wd-icon name="light" size="44rpx" color="#ff9500" />
|
||||
<text class="guide-title">快速开始</text>
|
||||
</view>
|
||||
<view class="guide-steps">
|
||||
<view
|
||||
v-for="(step, index) in guideSteps"
|
||||
:key="index"
|
||||
class="guide-step"
|
||||
>
|
||||
<view class="step-indicator">
|
||||
<view class="step-number">{{ index + 1 }}</view>
|
||||
<view class="step-line" v-if="index < guideSteps.length - 1"></view>
|
||||
</view>
|
||||
<view class="step-content">
|
||||
<text class="step-title">{{ step.title }}</text>
|
||||
<text class="step-desc" v-if="step.desc">{{ step.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="guide-footer">
|
||||
<wd-icon name="tips" size="28rpx" color="#999" />
|
||||
<text class="footer-text">详细操作手册请查看帮助文档或联系客服获取</text>
|
||||
</view>
|
||||
</view>
|
||||
</wd-collapse-item>
|
||||
</wd-collapse>
|
||||
</view>
|
||||
<view class="mt-15rpx">
|
||||
<text>目录结构：</text>
|
||||
</view>
|
||||
<rich-text :nodes="subListStr" />
|
||||
<view class="mt-15rpx">
|
||||
<text>在pages.json文件中声明分包结构：</text>
|
||||
</view>
|
||||
<rich-text :nodes="pagesStr" />
|
||||
</wd-collapse-item>
|
||||
</wd-collapse>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const value = ref<string[]>(["item1"]);
|
||||
const subListStr = ref<string>(`
|
||||
<pre style="background-color: #f9f9fa"><code>
|
||||
|-- components //主包组件目录
|
||||
|-- pages //主包页面目录
|
||||
| |-- index
|
||||
|-- sub-pkg-a
|
||||
| |-- components //分包组件目录
|
||||
| |-- pages //分包页面目录
|
||||
| | |-- cat
|
||||
| | |-- dog
|
||||
|-- sub-pkg-b
|
||||
| |-- components //分包组件目录
|
||||
| |-- pages //分包页面目录
|
||||
| | |-- apple</code></pre>
|
||||
`);
|
||||
import { ref } from "vue";
|
||||
|
||||
const pagesStr = ref<string>(`<pre style="background-color: #f9f9fa"><code>
|
||||
{
|
||||
"pages":[
|
||||
{
|
||||
"path": "pages/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "主页"
|
||||
// 响应式数据
|
||||
const activeNames = ref<string[]>(["faq"]);
|
||||
const currentFaq = ref<number | null>(null);
|
||||
const scrollTop = ref<number>(0);
|
||||
|
||||
// FAQ数据
|
||||
const faqList = ref([
|
||||
{
|
||||
question: "如何重置密码？",
|
||||
answer: '在登录页面点击"忘记密码"，按照提示操作即可重置密码。如果无法收到验证码，请检查邮箱或手机号是否正确，或联系客服协助处理。'
|
||||
},
|
||||
{
|
||||
question: "数据如何备份？",
|
||||
answer: '系统会自动定期备份数据，您也可以在"系统设置-数据管理"中手动导出数据。建议每月进行一次完整数据备份，确保数据安全。'
|
||||
},
|
||||
{
|
||||
question: "支持哪些浏览器？",
|
||||
answer: '推荐使用Chrome 90+、Firefox 88+、Safari 14+、Edge 90+等现代浏览器。IE浏览器仅支持IE11及以上版本。'
|
||||
},
|
||||
{
|
||||
question: "如何联系客服？",
|
||||
answer: "您可以通过以下方式联系客服：1. 客服热线 400-123-4567（工作日9:00-18:00）；2. 邮箱 support@example.com（7×24小时）；3. 在线客服（工作日9:00-18:00）。"
|
||||
}
|
||||
])
|
||||
|
||||
// 系统功能数据
|
||||
const featureList = ref([
|
||||
{
|
||||
name: "用户管理",
|
||||
desc: "支持用户注册、登录、权限管理等功能",
|
||||
icon: "user",
|
||||
color: "#0083f0"
|
||||
},
|
||||
{
|
||||
name: "数据统计",
|
||||
desc: "提供实时数据分析和可视化报表",
|
||||
icon: "chart",
|
||||
color: "#00c250"
|
||||
},
|
||||
{
|
||||
name: "文件管理",
|
||||
desc: "支持文件上传、下载、分类管理",
|
||||
icon: "folder",
|
||||
color: "#ff9500"
|
||||
},
|
||||
{
|
||||
name: "消息通知",
|
||||
desc: "实时消息推送和系统通知",
|
||||
icon: "notification",
|
||||
color: "#ff3b30"
|
||||
}
|
||||
])
|
||||
|
||||
// 使用指南数据
|
||||
const guideSteps = ref([
|
||||
{
|
||||
title: "注册账号并登录系统",
|
||||
desc: "使用手机号或邮箱注册账号，完成实名认证"
|
||||
},
|
||||
{
|
||||
title: "完善个人或企业信息",
|
||||
desc: "填写基本信息，设置安全问题和密保邮箱"
|
||||
},
|
||||
{
|
||||
title: "根据需求配置功能模块",
|
||||
desc: "选择需要的功能模块，设置相关参数"
|
||||
},
|
||||
{
|
||||
title: "开始使用各项功能",
|
||||
desc: "完成初始化设置，开始使用系统各项功能"
|
||||
}
|
||||
])
|
||||
|
||||
// 方法定义
|
||||
const handleBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const handleScroll = (e: any) => {
|
||||
scrollTop.value = e.detail.scrollTop
|
||||
}
|
||||
|
||||
const toggleFaq = (index: number) => {
|
||||
currentFaq.value = currentFaq.value === index ? null : index
|
||||
}
|
||||
|
||||
const handleContact = (type: "email" | "phone") => {
|
||||
if (type === "email") {
|
||||
// #ifdef H5
|
||||
window.location.href = "mailto:support@example.com"
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
uni.setClipboardData({
|
||||
data: "support@example.com",
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: "邮箱已复制",
|
||||
icon: "success"
|
||||
})
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [
|
||||
{
|
||||
"root": "sub-pkg-a",
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/cat",
|
||||
"style": {
|
||||
"navigationBarTitleText": "cat"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/dog",
|
||||
"style": {
|
||||
"navigationBarTitleText": "dog"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "sub-pkg-b",
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/apple",
|
||||
"style": {
|
||||
"navigationBarTitleText": "apple"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}</code></pre>
|
||||
`);
|
||||
onMounted(() => {});
|
||||
})
|
||||
// #endif
|
||||
} else if (type === "phone") {
|
||||
// #ifdef H5
|
||||
window.location.href = "tel:400-123-4567"
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: "400-123-4567"
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
// 可以在这里添加页面埋点或初始化逻辑
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.faq-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
.wechat {
|
||||
padding: 30rpx;
|
||||
margin: 20px 0;
|
||||
font-size: 14px;
|
||||
color: var(--wot-card-content-color, rgba(0, 0, 0, 0.45));
|
||||
background-color: #fff;
|
||||
.tips {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: var(--wot-color-bg);
|
||||
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
// 技术支持卡片样式
|
||||
.support-card {
|
||||
margin-bottom: 24rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
border-bottom: 1rpx solid var(--wot-color-border);
|
||||
|
||||
.card-title {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 32rpx;
|
||||
|
||||
.card-desc {
|
||||
display: block;
|
||||
margin-bottom: 32rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
color: var(--wot-color-text-light);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.support-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24rpx;
|
||||
|
||||
.support-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
background: var(--wot-color-bg);
|
||||
border-radius: 16rpx;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.support-icon {
|
||||
flex-shrink: 0;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.support-info {
|
||||
flex: 1;
|
||||
|
||||
.support-label {
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
|
||||
.support-value {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: var(--wot-color-text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FAQ区域样式
|
||||
.faq-section {
|
||||
:deep(.wd-collapse-item__title) {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.wd-collapse-item__content) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
.faq-item {
|
||||
border-bottom: 1rpx solid var(--wot-color-border);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(0, 131, 240, 0.02);
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
|
||||
.faq-question {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
margin-right: 24rpx;
|
||||
|
||||
.question-text {
|
||||
margin-left: 16rpx;
|
||||
font-size: 30rpx;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.wd-icon {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&.rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 0 32rpx 32rpx 32rpx;
|
||||
border-top: 1rpx solid var(--wot-color-border);
|
||||
|
||||
.answer-text {
|
||||
display: block;
|
||||
padding: 24rpx 0;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.6;
|
||||
color: var(--wot-color-text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid var(--wot-color-border);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
flex-shrink: 0;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
flex: 1;
|
||||
|
||||
.feature-name {
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
color: var(--wot-color-text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guide-section {
|
||||
padding: 32rpx;
|
||||
|
||||
.guide-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 48rpx;
|
||||
|
||||
.guide-title {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.guide-steps {
|
||||
.guide-step {
|
||||
display: flex;
|
||||
margin-bottom: 48rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.step-indicator {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-right: 24rpx;
|
||||
|
||||
.step-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: var(--wot-color-theme);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
top: 48rpx;
|
||||
left: 50%;
|
||||
width: 2rpx;
|
||||
height: 48rpx;
|
||||
background: var(--wot-color-border);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
padding-top: 8rpx;
|
||||
|
||||
.step-title {
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
color: var(--wot-color-text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guide-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 48rpx;
|
||||
padding: 32rpx;
|
||||
background: var(--wot-color-bg);
|
||||
border-radius: 16rpx;
|
||||
|
||||
.footer-text {
|
||||
margin-left: 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: var(--wot-color-text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media screen and (min-width: 768px) {
|
||||
.faq-container {
|
||||
.content-wrapper {
|
||||
max-width: 750rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.support-card {
|
||||
.support-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暗黑模式适配
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.faq-container {
|
||||
--wot-color-text: #f5f5f5;
|
||||
--wot-color-text-light: #969799;
|
||||
--wot-color-border: #3a3a3c;
|
||||
--wot-color-bg: #1c1c1e;
|
||||
|
||||
.support-card,
|
||||
.faq-section :deep(.wd-collapse) {
|
||||
background: #2c2c2e;
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,7 +99,8 @@ const navigateToOfficialWebsite = () => {
|
||||
|
||||
// 网络测试
|
||||
const navigateToNetworkTest = () => {
|
||||
uni.navigateTo({ url: "/pages/mine/settings/network/index" });
|
||||
// #ifdef H5
|
||||
window.open("https://service.fastapiadmin.com", "_blank");
|
||||
};
|
||||
|
||||
// 是否正在清理
|
||||
|
||||
Reference in New Issue
Block a user