Spaces:

duqing026
/

uniapp-miniprogram

Sleeping

App Files Files Community

Trae Assistant commited on Mar 6

Commit

e3bbdaf

0 Parent(s):

initial commit

Browse files

Files changed (22) hide show

.gitignore +21 -0
Dockerfile +32 -0
README.md +84 -0
index.html +20 -0
nginx.conf +18 -0
package.json +73 -0
pnpm-lock.yaml +0 -0
shims-uni.d.ts +10 -0
src/App.vue +47 -0
src/env.d.ts +8 -0
src/main.ts +8 -0
src/manifest.json +111 -0
src/pages.json +56 -0
src/pages/function/function.vue +171 -0
src/pages/index/index.vue +166 -0
src/pages/login/login.vue +230 -0
src/pages/profile/profile.vue +198 -0
src/shime-uni.d.ts +6 -0
src/static/logo.png +0 -0
src/uni.scss +76 -0
tsconfig.json +13 -0
vite.config.ts +7 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,21 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+.DS_Store
+dist
+*.local
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Dockerfile ADDED Viewed

	@@ -0,0 +1,32 @@

+# 使用Node.js作为基础镜像进行构建
+FROM node:18-alpine AS build-stage
+# 设置工作目录
+WORKDIR /app
+# 安装pnpm
+RUN npm install -g pnpm
+# 复制依赖文件并安装
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install
+# 复制源代码并构建 H5 版本
+COPY . .
+RUN pnpm run build:h5
+# 使用Nginx作为基础镜像进行部署
+FROM nginx:stable-alpine AS production-stage
+# 复制构建好的静态文件到Nginx目录
+# UniApp H5 默认构建目录是 dist/build/h5
+COPY --from=build-stage /app/dist/build/h5 /usr/share/nginx/html
+# 复制自定义Nginx配置
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+# 暴露80端口
+EXPOSE 80
+# 启动Nginx
+CMD ["nginx", "-g", "daemon off;"]

README.md ADDED Viewed

	@@ -0,0 +1,84 @@

+---
+title: UniApp多平台小程序演示
+emoji: 🚀
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 80
+short_description: UniApp多平台小程序，一套代码运行在微信、支付宝、百度、抖音等平台。
+---
+# UniApp 多平台小程序
+## 项目简介
+基于 UniApp 框架开发的多平台小程序应用，支持微信、支付宝、百度、抖音等主流小程序平台。项目采用中文界面和代码注释，提供完整的用户交互体验和现代化的 UI 设计。
+## 功能特性
+- 🚀 **一套代码，多端运行**：支持微信、支付宝、百度、抖音、QQ、H5 等平台。
+- 🎨 **现代化 UI 设计**：采用卡片式布局，界面美观大方。
+- 🌐 **全中文支持**：包括界面文字、提示信息、代码注释等。
+- 📦 **Docker 部署**：支持一键 Docker 构建和部署，适配 Hugging Face Spaces。
+## 页面展示
+1. **首页**：轮播图、功能入口、热门推荐。
+2. **功能演示**：表单交互、条件编译、反馈提示。
+3. **个人中心**：用户信息、统计数据、功能菜单。
+4. **登录页面**：手机号登录、微信一键登录。
+## 开发指南
+### 环境要求
+- Node.js >= 16.0.0
+- pnpm >= 8.0.0
+### 安装依赖
+```bash
+pnpm install
+```
+### 开发环境运行
+```bash
+# 运行到微信小程序
+pnpm run dev:mp-weixin
+# 运行到 H5
+pnpm run dev:h5
+```
+### 生产环境构建
+```bash
+# 构建微信小程序
+pnpm run build:mp-weixin
+# 构建 H5
+pnpm run build:h5
+```
+## 部署说明
+### Docker 部署
+```bash
+# 构建镜像
+docker build -t uniapp-app .
+# 运行容器
+docker run -d -p 80:80 uniapp-app
+```
+## 项目结构
+```text
+uniapp-miniprogram/
+├── src/
+│   ├── pages/           # 页面目录
+│   ├── static/          # 静态资源
+│   ├── App.vue          # 应用主入口
+│   ├── manifest.json    # 应用配置
+│   ├── pages.json       # 路由配置
+│   └── uni.scss         # 全局样式
+├── Dockerfile           # Docker 配置文件
+├── nginx.conf           # Nginx 配置文件
+└── package.json         # 项目依赖
+```
+## 许可证
+MIT License

index.html ADDED Viewed

	@@ -0,0 +1,20 @@

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

nginx.conf ADDED Viewed

	@@ -0,0 +1,18 @@

+server {
+    listen       80;
+    server_name  localhost;
+    # 静态资源目录
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        # 支持单页应用路由
+        try_files $uri $uri/ /index.html;
+    }
+    # 错误页面处理
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

package.json ADDED Viewed

	@@ -0,0 +1,73 @@

+{
+  "name": "uni-preset-vue",
+  "version": "0.0.0",
+  "scripts": {
+    "dev:custom": "uni -p",
+    "dev:h5": "uni",
+    "dev:h5:ssr": "uni --ssr",
+    "dev:mp-alipay": "uni -p mp-alipay",
+    "dev:mp-baidu": "uni -p mp-baidu",
+    "dev:mp-jd": "uni -p mp-jd",
+    "dev:mp-kuaishou": "uni -p mp-kuaishou",
+    "dev:mp-lark": "uni -p mp-lark",
+    "dev:mp-qq": "uni -p mp-qq",
+    "dev:mp-toutiao": "uni -p mp-toutiao",
+    "dev:mp-harmony": "uni -p mp-harmony",
+    "dev:mp-weixin": "uni -p mp-weixin",
+    "dev:mp-xhs": "uni -p mp-xhs",
+    "dev:quickapp-webview": "uni -p quickapp-webview",
+    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
+    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
+    "build:custom": "uni build -p",
+    "build:h5": "uni build",
+    "build:h5:ssr": "uni build --ssr",
+    "build:mp-alipay": "uni build -p mp-alipay",
+    "build:mp-baidu": "uni build -p mp-baidu",
+    "build:mp-jd": "uni build -p mp-jd",
+    "build:mp-kuaishou": "uni build -p mp-kuaishou",
+    "build:mp-lark": "uni build -p mp-lark",
+    "build:mp-qq": "uni build -p mp-qq",
+    "build:mp-toutiao": "uni build -p mp-toutiao",
+    "build:mp-harmony": "uni build -p mp-harmony",
+    "build:mp-weixin": "uni build -p mp-weixin",
+    "build:mp-xhs": "uni build -p mp-xhs",
+    "build:quickapp-webview": "uni build -p quickapp-webview",
+    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
+    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@dcloudio/uni-app": "3.0.0-4080720251210001",
+    "@dcloudio/uni-app-harmony": "3.0.0-4080720251210001",
+    "@dcloudio/uni-app-plus": "3.0.0-4080720251210001",
+    "@dcloudio/uni-components": "3.0.0-4080720251210001",
+    "@dcloudio/uni-h5": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-harmony": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-jd": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-lark": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-qq": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-4080720251210001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-4080720251210001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-4080720251210001",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.1.9"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.8",
+    "@dcloudio/uni-automator": "3.0.0-4080720251210001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4080720251210001",
+    "@dcloudio/uni-stacktracey": "3.0.0-4080720251210001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4080720251210001",
+    "@vue/runtime-core": "^3.4.21",
+    "@vue/tsconfig": "^0.1.3",
+    "sass": "^1.97.3",
+    "sass-loader": "^16.0.7",
+    "typescript": "^4.9.4",
+    "vite": "5.2.8",
+    "vue-tsc": "^1.0.24"
+  }
+}

pnpm-lock.yaml ADDED Viewed

The diff for this file is too large to render. See raw diff

shims-uni.d.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+/// <reference types='@dcloudio/types' />
+import 'vue'
+declare module '@vue/runtime-core' {
+  type Hooks = App.AppInstance & Page.PageInstance;
+  interface ComponentCustomOptions extends Hooks {
+  }
+}

src/App.vue ADDED Viewed

	@@ -0,0 +1,47 @@

+<script setup lang="ts">
+import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
+onLaunch(() => {
+  console.log("App Launch");
+});
+onShow(() => {
+  console.log("App Show");
+});
+onHide(() => {
+  console.log("App Hide");
+});
+</script>
+<style lang="scss">
+/* H5 网页限制最大宽度并居中 */
+/* #ifdef H5 */
+uni-page-body,
+body {
+  display: flex;
+  justify-content: center;
+  background-color: #f0f0f0 !important; /* 背景灰色，突出手机显示区域 */
+}
+uni-page-wrapper {
+  max-width: 500px !important; /* 限制宽度 */
+  margin: 0 auto !important;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  min-height: 100vh;
+}
+/* 适配顶部导航栏 */
+uni-page-head {
+  max-width: 500px !important;
+  margin: 0 auto !important;
+  left: 0 !important;
+  right: 0 !important;
+}
+/* 适配底部 TabBar */
+uni-tabbar {
+  max-width: 500px !important;
+  margin: 0 auto !important;
+  left: 0 !important;
+  right: 0 !important;
+}
+/* #endif */
+</style>

src/env.d.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+/// <reference types="vite/client" />
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/main.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import { createSSRApp } from "vue";
+import App from "./App.vue";
+export function createApp() {
+  const app = createSSRApp(App);
+  return {
+    app,
+  };
+}

src/manifest.json ADDED Viewed

	@@ -0,0 +1,111 @@

+{
+    "name": "UniApp多平台小程序",
+    "appid": "__UNI__XXXXXX",
+    "description": "基于UniApp的多平台小程序，支持微信、支付宝、百度、抖音等主流小程序平台。",
+    "versionName": "1.0.0",
+    "versionCode": "100",
+    "transformPx": false,
+    "app-plus": {
+        "usingComponents": true,
+        "nvueStyleCompiler": "uni-app",
+        "compilerVersion": 3,
+        "splashscreen": {
+            "alwaysShowBeforeRender": true,
+            "waiting": true,
+            "autoclose": true,
+            "delay": 0
+        },
+        "modules": {},
+        "distribute": {
+            "android": {
+                "permissions": [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\" />",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\" />",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\" />",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\" />",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" />",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\" />",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />",
+                    "<uses-permission android:name=\"android.permission.CAMERA\" />",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\" />",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\" />",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\" />",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\" />",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\" />",
+                    "<uses-permission android:name=\"android.hardware.camera\" />",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\" />"
+                ]
+            },
+            "ios": {},
+            "sdkConfigs": {}
+        }
+    },
+    "quickapp": {},
+    "mp-weixin": {
+        "appid": "",
+        "setting": {
+            "urlCheck": false,
+            "es6": true,
+            "enhance": true,
+            "postcss": true,
+            "preloadBackgroundData": false,
+            "minified": true,
+            "newFeature": false,
+            "coverView": true,
+            "nodeModules": false,
+            "autoAudits": false,
+            "showShadowRootInWxmlPanel": true,
+            "scopeDataCheck": false,
+            "uglifyFileName": false,
+            "checkInvalidKey": true,
+            "checkSiteMap": true,
+            "uploadWithSourceMap": true,
+            "compileHotReLoad": false,
+            "lazyloadPlaceholderEnable": false,
+            "useMultiFrameRuntime": true,
+            "useApiHook": true,
+            "useApiHostProcess": true,
+            "babelSetting": {
+                "ignore": [],
+                "disablePlugins": [],
+                "outputPath": ""
+            },
+            "enableEngineNative": false,
+            "useIsolateContext": true,
+            "userConfirmedBundleSwitch": false,
+            "packNpmManually": false,
+            "packNpmRelationList": [],
+            "minifyWXSS": true,
+            "disableUseStrict": false,
+            "minifyWXML": true,
+            "showES6CompileOption": false,
+            "useCompilerPlugins": false
+        },
+        "usingComponents": true,
+        "permission": {
+            "scope.userLocation": {
+                "desc": "获取位置信息用于小程序位置接口的效果展示"
+            }
+        },
+        "optimization": {
+            "subPackages": true
+        },
+        "uniStatistics": {
+            "enable": false
+        }
+    },
+    "mp-alipay": {
+        "usingComponents": true,
+        "component2": true
+    },
+    "mp-baidu": {
+        "usingComponents": true
+    },
+    "mp-toutiao": {
+        "usingComponents": true
+    },
+    "uniStatistics": {
+        "enable": false
+    },
+    "vueVersion": "3"
+}

src/pages.json ADDED Viewed

	@@ -0,0 +1,56 @@

+{
+    "pages": [
+        {
+            "path": "pages/index/index",
+            "style": {
+                "navigationBarTitleText": "首页",
+                "enablePullDownRefresh": true
+            }
+        },
+        {
+            "path": "pages/profile/profile",
+            "style": {
+                "navigationBarTitleText": "个人中心"
+            }
+        },
+        {
+            "path": "pages/function/function",
+            "style": {
+                "navigationBarTitleText": "功能"
+            }
+        },
+        {
+            "path": "pages/login/login",
+            "style": {
+                "navigationBarTitleText": "登录"
+            }
+        }
+    ],
+    "globalStyle": {
+        "navigationBarTextStyle": "black",
+        "navigationBarTitleText": "UniApp小程序",
+        "navigationBarBackgroundColor": "#F8F8F8",
+        "backgroundColor": "#F8F8F8"
+    },
+    "uniIdRouter": {},
+    "tabBar": {
+        "color": "#7A7E83",
+        "selectedColor": "#1890ff",
+        "borderStyle": "black",
+        "backgroundColor": "#ffffff",
+        "list": [
+            {
+                "pagePath": "pages/index/index",
+                "text": "首页"
+            },
+            {
+                "pagePath": "pages/function/function",
+                "text": "功能"
+            },
+            {
+                "pagePath": "pages/profile/profile",
+                "text": "我的"
+            }
+        ]
+    }
+}

src/pages/function/function.vue ADDED Viewed

	@@ -0,0 +1,171 @@

+<template>
+  <view class="container">
+    <view class="card">
+      <view class="card-title">表单交互演示</view>
+      <view class="form-item">
+        <text class="label">输入内容：</text>
+        <input class="input" v-model="inputValue" placeholder="请输入内容" />
+      </view>
+      <view class="form-item">
+        <text class="label">当前输入：</text>
+        <text class="value">{{ inputValue || '暂无内容' }}</text>
+      </view>
+      <button class="primary-btn" @tap="handleSubmit">提交数据</button>
+    </view>
+    <view class="card">
+      <view class="card-title">条件编译演示</view>
+      <view class="platform-box">
+        <!-- #ifdef MP-WEIXIN -->
+        <view class="platform-tag weixin">当前处于：微信小程序</view>
+        <!-- #endif -->
+        <!-- #ifdef MP-ALIPAY -->
+        <view class="platform-tag alipay">当前处于：支付宝小程序</view>
+        <!-- #endif -->
+        <!-- #ifdef H5 -->
+        <view class="platform-tag h5">当前处于：H5 网页</view>
+        <!-- #endif -->
+        <view class="desc">这里使用了 UniApp 的条件编译功能，不同平台会显示不同的内容。</view>
+      </view>
+    </view>
+    <view class="card">
+      <view class="card-title">交互反馈演示</view>
+      <view class="btn-group">
+        <button class="btn" @tap="showToast">显示提示</button>
+        <button class="btn" @tap="showLoading">显示加载</button>
+        <button class="btn" @tap="showModal">显示弹窗</button>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const inputValue = ref('')
+const handleSubmit = () => {
+  if (!inputValue.value) {
+    uni.showToast({ title: '请输入内容', icon: 'none' })
+    return
+  }
+  uni.showToast({ title: '提交成功', icon: 'success' })
+}
+const showToast = () => {
+  uni.showToast({ title: '这是一个提示信息' })
+}
+const showLoading = () => {
+  uni.showLoading({ title: '加载中...' })
+  setTimeout(() => {
+    uni.hideLoading()
+  }, 2000)
+}
+const showModal = () => {
+  uni.showModal({
+    title: '温馨提示',
+    content: '这是一个自定义弹窗内容，用于确认用户操作。',
+    confirmText: '确定',
+    cancelText: '取消'
+  })
+}
+</script>
+<style lang="scss">
+.container {
+  padding: 30rpx;
+  background-color: #f8f8f8;
+  min-height: 100vh;
+}
+.card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+  .card-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 30rpx;
+    padding-left: 20rpx;
+    border-left: 8rpx solid #1890ff;
+  }
+}
+.form-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+  .label {
+    font-size: 28rpx;
+    color: #666;
+    width: 160rpx;
+  }
+  .input {
+    flex: 1;
+    height: 80rpx;
+    border: 1rpx solid #ddd;
+    border-radius: 8rpx;
+    padding: 0 20rpx;
+    font-size: 28rpx;
+  }
+  .value {
+    font-size: 28rpx;
+    color: #1890ff;
+  }
+}
+.primary-btn {
+  background-color: #1890ff;
+  color: #fff;
+  font-size: 30rpx;
+  border-radius: 8rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+}
+.platform-box {
+  .platform-tag {
+    padding: 20rpx;
+    border-radius: 8rpx;
+    color: #fff;
+    font-size: 28rpx;
+    text-align: center;
+    margin-bottom: 20rpx;
+    &.weixin { background-color: #07c160; }
+    &.alipay { background-color: #1677ff; }
+    &.h5 { background-color: #ff4d4f; }
+  }
+  .desc {
+    font-size: 24rpx;
+    color: #999;
+    line-height: 1.6;
+  }
+}
+.btn-group {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  .btn {
+    font-size: 28rpx;
+    background-color: #f5f5f5;
+    color: #333;
+    border: none;
+    &::after { border: none; }
+  }
+}
+</style>

src/pages/index/index.vue ADDED Viewed

	@@ -0,0 +1,166 @@

+<template>
+  <view class="container">
+    <!-- 轮播图模块 -->
+    <swiper class="banner" circular autoplay indicator-dots indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
+      <swiper-item v-for="(item, index) in banners" :key="index">
+        <image :src="item.image" mode="aspectFill" class="banner-image"></image>
+      </swiper-item>
+    </swiper>
+    <!-- 功能入口网格 -->
+    <view class="grid">
+      <view class="grid-item" v-for="(item, index) in gridItems" :key="index" @tap="navigateTo(item.path)">
+        <view class="grid-icon-box" :style="{ backgroundColor: item.color }">
+          <uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
+        </view>
+        <text class="grid-text">{{ item.text }}</text>
+      </view>
+    </view>
+    <!-- 推荐内容列表 -->
+    <view class="section">
+      <view class="section-title">热门推荐</view>
+      <view class="list">
+        <view class="list-item" v-for="(item, index) in recommendations" :key="index">
+          <image :src="item.image" mode="aspectFill" class="list-image"></image>
+          <view class="list-content">
+            <view class="list-title">{{ item.title }}</view>
+            <view class="list-desc">{{ item.desc }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+// 轮播图数据
+const banners = ref([
+  { image: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=modern+tech+banner+blue&image_size=landscape_16_9' },
+  { image: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=abstract+digital+background+vibrant&image_size=landscape_16_9' },
+  { image: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=futuristic+interface+design&image_size=landscape_16_9' }
+])
+// 功能网格数据
+const gridItems = ref([
+  { text: '功能演示', icon: 'star', color: '#1890ff', path: '/pages/function/function' },
+  { text: '个人中心', icon: 'person', color: '#52c41a', path: '/pages/profile/profile' },
+  { text: '联系我们', icon: 'chat', color: '#faad14', path: '/pages/index/index' },
+  { text: '设置', icon: 'gear', color: '#f5222d', path: '/pages/index/index' }
+])
+// 推荐列表数据
+const recommendations = ref([
+  { title: 'UniApp 跨平台开发指南', desc: '一套代码，多端运行，极大地提高开发效率。', image: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=coding+laptop+desk&image_size=square' },
+  { title: '小程序生态概览', desc: '深度解析微信、支付宝等主流小程序平台的差异与优势。', image: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=mobile+apps+network&image_size=square' },
+  { title: 'Vue3 + TypeScript 实战', desc: '利用现代前端技术栈构建健壮的小程序应用。', image: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=vuejs+typescript+logo&image_size=square' }
+])
+// 页面跳转
+const navigateTo = (path: string) => {
+  uni.switchTab({ url: path }).catch(() => {
+    uni.navigateTo({ url: path })
+  })
+}
+</script>
+<style lang="scss">
+.container {
+  background-color: #f8f8f8;
+  min-height: 100vh;
+}
+.banner {
+  height: 360rpx;
+  .banner-image {
+    width: 100%;
+    height: 100%;
+  }
+}
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  .grid-item {
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20rpx 0;
+    .grid-icon-box {
+      width: 90rpx;
+      height: 90rpx;
+      border-radius: 20rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 12rpx;
+    }
+    .grid-text {
+      font-size: 24rpx;
+      color: #333;
+    }
+  }
+}
+.section {
+  padding: 20rpx;
+  background-color: #fff;
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    margin-bottom: 20rpx;
+    color: #333;
+    padding-left: 10rpx;
+    border-left: 8rpx solid #1890ff;
+  }
+}
+.list {
+  .list-item {
+    display: flex;
+    padding: 20rpx 0;
+    border-bottom: 1rpx solid #eee;
+    &:last-child {
+      border-bottom: none;
+    }
+    .list-image {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 12rpx;
+      margin-right: 20rpx;
+    }
+    .list-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .list-title {
+        font-size: 28rpx;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 10rpx;
+      }
+      .list-desc {
+        font-size: 24rpx;
+        color: #666;
+        line-height: 1.4;
+      }
+    }
+  }
+}
+</style>

src/pages/login/login.vue ADDED Viewed

	@@ -0,0 +1,230 @@

+<template>
+  <view class="container">
+    <view class="login-box">
+      <image class="logo" src="https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=app+logo+minimalist+blue&image_size=square" mode="aspectFit"></image>
+      <view class="title">欢迎使用</view>
+      <view class="subtitle">UniApp 多平台小程序演示</view>
+      <view class="input-group">
+        <view class="input-item">
+          <uni-icons type="phone" size="20" color="#999"></uni-icons>
+          <input class="input" type="number" v-model="phone" placeholder="请输入手机号" maxlength="11" />
+        </view>
+        <view class="input-item">
+          <uni-icons type="mail" size="20" color="#999"></uni-icons>
+          <input class="input" type="number" v-model="code" placeholder="请输入验证码" maxlength="6" />
+          <text class="get-code" :class="{ disabled: countdown > 0 }" @tap="getCode">
+            {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
+          </text>
+        </view>
+      </view>
+      <button class="login-btn" @tap="handleLogin">登录</button>
+      <view class="other-login">
+        <view class="line"></view>
+        <view class="text">其他登录方式</view>
+        <view class="line"></view>
+      </view>
+      <view class="quick-login">
+        <!-- #ifdef MP-WEIXIN -->
+        <button class="icon-btn weixin" open-type="getPhoneNumber" @getphonenumber="handleWxLogin">
+          <uni-icons type="weixin" size="30" color="#fff"></uni-icons>
+        </button>
+        <!-- #endif -->
+        <button class="icon-btn" @tap="handleQuickLogin">
+          <uni-icons type="qq" size="30" color="#fff"></uni-icons>
+        </button>
+      </view>
+      <view class="agreement">
+        登录即代表您已同意 <text class="link">《用户协议》</text> 和 <text class="link">《隐私政策》</text>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const phone = ref('')
+const code = ref('')
+const countdown = ref(0)
+const getCode = () => {
+  if (countdown.value > 0) return
+  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
+    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
+    return
+  }
+  uni.showToast({ title: '验证码已发送', icon: 'success' })
+  countdown.value = 60
+  const timer = setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0) {
+      clearInterval(timer)
+    }
+  }, 1000)
+}
+const handleLogin = () => {
+  if (!phone.value || !code.value) {
+    uni.showToast({ title: '请填写完整信息', icon: 'none' })
+    return
+  }
+  uni.showLoading({ title: '登录中...' })
+  setTimeout(() => {
+    uni.hideLoading()
+    uni.showToast({ title: '登录成功', icon: 'success' })
+    setTimeout(() => {
+      uni.switchTab({ url: '/pages/index/index' })
+    }, 1500)
+  }, 1000)
+}
+const handleWxLogin = (e: any) => {
+  console.log('微信登录详情：', e)
+  uni.showToast({ title: '微信授权成功', icon: 'success' })
+  setTimeout(() => {
+    uni.switchTab({ url: '/pages/index/index' })
+  }, 1500)
+}
+const handleQuickLogin = () => {
+  uni.showToast({ title: '第三方登录成功', icon: 'success' })
+  setTimeout(() => {
+    uni.switchTab({ url: '/pages/index/index' })
+  }, 1500)
+}
+</script>
+<style lang="scss">
+.container {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+}
+.login-box {
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .logo {
+    width: 160rpx;
+    height: 160rpx;
+    margin-bottom: 30rpx;
+  }
+  .title {
+    font-size: 40rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10rpx;
+  }
+  .subtitle {
+    font-size: 26rpx;
+    color: #999;
+    margin-bottom: 60rpx;
+  }
+}
+.input-group {
+  width: 100%;
+  margin-bottom: 40rpx;
+  .input-item {
+    display: flex;
+    align-items: center;
+    border-bottom: 1rpx solid #eee;
+    height: 100rpx;
+    margin-bottom: 20rpx;
+    .input {
+      flex: 1;
+      margin-left: 20rpx;
+      font-size: 28rpx;
+    }
+    .get-code {
+      font-size: 26rpx;
+      color: #1890ff;
+      padding: 10rpx 20rpx;
+      &.disabled {
+        color: #999;
+      }
+    }
+  }
+}
+.login-btn {
+  width: 100%;
+  height: 90rpx;
+  line-height: 90rpx;
+  background-color: #1890ff;
+  color: #fff;
+  border-radius: 45rpx;
+  font-size: 32rpx;
+  margin-bottom: 60rpx;
+  &::after { border: none; }
+}
+.other-login {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 40rpx;
+  .line {
+    flex: 1;
+    height: 1rpx;
+    background-color: #eee;
+  }
+  .text {
+    font-size: 24rpx;
+    color: #999;
+    margin: 0 20rpx;
+  }
+}
+.quick-login {
+  display: flex;
+  gap: 40rpx;
+  margin-bottom: 60rpx;
+  .icon-btn {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+    background-color: #1890ff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    &.weixin { background-color: #07c160; }
+    &::after { border: none; }
+  }
+}
+.agreement {
+  font-size: 24rpx;
+  color: #999;
+  text-align: center;
+  .link {
+    color: #1890ff;
+  }
+}
+</style>

src/pages/profile/profile.vue ADDED Viewed

	@@ -0,0 +1,198 @@

+<template>
+  <view class="container">
+    <!-- 用户信息头部 -->
+    <view class="user-header">
+      <view class="user-info">
+        <image class="avatar" src="https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=friendly+human+avatar+minimalist&image_size=square" mode="aspectFill"></image>
+        <view class="info-right">
+          <text class="nickname">微信用户</text>
+          <text class="phone">138****8888</text>
+        </view>
+      </view>
+    </view>
+    <!-- 数据统计栏 -->
+    <view class="stats-bar">
+      <view class="stats-item" v-for="(item, index) in stats" :key="index">
+        <text class="stats-num">{{ item.num }}</text>
+        <text class="stats-label">{{ item.label }}</text>
+      </view>
+    </view>
+    <!-- 功能列表 -->
+    <view class="menu-list">
+      <view class="menu-item" v-for="(item, index) in menuItems" :key="index" @tap="handleMenuClick(item)">
+        <view class="menu-left">
+          <uni-icons :type="item.icon" size="20" :color="item.color"></uni-icons>
+          <text class="menu-text">{{ item.text }}</text>
+        </view>
+        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
+      </view>
+    </view>
+    <!-- 退出登录按钮 -->
+    <button class="logout-btn" @tap="handleLogout">退出登录</button>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+// 统计数据
+const stats = ref([
+  { num: '12', label: '收藏' },
+  { num: '8', label: '足迹' },
+  { num: '3', label: '优惠券' },
+  { num: '100', label: '积分' }
+])
+// 菜单项
+const menuItems = ref([
+  { text: '我的订单', icon: 'list', color: '#1890ff' },
+  { text: '收货地址', icon: 'location', color: '#52c41a' },
+  { text: '我的收藏', icon: 'heart', color: '#f5222d' },
+  { text: '意见反馈', icon: 'email', color: '#faad14' },
+  { text: '关于我们', icon: 'info', color: '#722ed1' }
+])
+// 菜单点击
+const handleMenuClick = (item: any) => {
+  uni.showToast({
+    title: `点击了${item.text}`,
+    icon: 'none'
+  })
+}
+// 退出登录
+const handleLogout = () => {
+  uni.showModal({
+    title: '提示',
+    content: '确定要退出登录吗？',
+    success: (res) => {
+      if (res.confirm) {
+        uni.reLaunch({ url: '/pages/login/login' })
+      }
+    }
+  })
+}
+</script>
+<style lang="scss">
+.container {
+  background-color: #f8f8f8;
+  min-height: 100vh;
+}
+.user-header {
+  background: linear-gradient(to bottom, #1890ff, #40a9ff);
+  padding: 60rpx 40rpx 100rpx;
+  .user-info {
+    display: flex;
+    align-items: center;
+    .avatar {
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: 50%;
+      border: 4rpx solid rgba(255,255,255,0.8);
+      margin-right: 30rpx;
+    }
+    .info-right {
+      display: flex;
+      flex-direction: column;
+      .nickname {
+        font-size: 36rpx;
+        font-weight: bold;
+        color: #fff;
+        margin-bottom: 10rpx;
+      }
+      .phone {
+        font-size: 24rpx;
+        color: rgba(255,255,255,0.8);
+      }
+    }
+  }
+}
+.stats-bar {
+  display: flex;
+  background-color: #fff;
+  margin: -40rpx 30rpx 20rpx;
+  border-radius: 16rpx;
+  padding: 30rpx 0;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+  .stats-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-right: 1rpx solid #f0f0f0;
+    &:last-child {
+      border-right: none;
+    }
+    .stats-num {
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 8rpx;
+    }
+    .stats-label {
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+}
+.menu-list {
+  background-color: #fff;
+  margin: 0 30rpx 40rpx;
+  border-radius: 16rpx;
+  padding: 0 30rpx;
+  .menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+    &:last-child {
+      border-bottom: none;
+    }
+    .menu-left {
+      display: flex;
+      align-items: center;
+      .menu-text {
+        font-size: 28rpx;
+        color: #333;
+        margin-left: 20rpx;
+      }
+    }
+  }
+}
+.logout-btn {
+  margin: 0 30rpx;
+  background-color: #fff;
+  color: #f5222d;
+  font-size: 30rpx;
+  border-radius: 16rpx;
+  height: 90rpx;
+  line-height: 90rpx;
+  border: none;
+  &::after {
+    border: none;
+  }
+}
+</style>

src/shime-uni.d.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+export {}
+declare module "vue" {
+  type Hooks = App.AppInstance & Page.PageInstance;
+  interface ComponentCustomOptions extends Hooks {}
+}

src/static/logo.png ADDED Viewed

src/uni.scss ADDED Viewed

	@@ -0,0 +1,76 @@

+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+/* 文字基本颜色 */
+$uni-text-color: #333; // 基本色
+$uni-text-color-inverse: #fff; // 反色
+$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable: #c0c0c0;
+/* 背景颜色 */
+$uni-bg-color: #fff;
+$uni-bg-color-grey: #f8f8f8;
+$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
+$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
+/* 边框颜色 */
+$uni-border-color: #c8c7cc;
+/* 尺寸变量 */
+/* 文字尺寸 */
+$uni-font-size-sm: 12px;
+$uni-font-size-base: 14px;
+$uni-font-size-lg: 16;
+/* 图片尺寸 */
+$uni-img-size-sm: 20px;
+$uni-img-size-base: 26px;
+$uni-img-size-lg: 40px;
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+/* 文章场景相关 */
+$uni-color-title: #2c405a; // 文章标题颜色
+$uni-font-size-title: 20px;
+$uni-color-subtitle: #555; // 二级标题颜色
+$uni-font-size-subtitle: 18px;
+$uni-color-paragraph: #3f536e; // 文章段落颜色
+$uni-font-size-paragraph: 15px;

tsconfig.json ADDED Viewed

	@@ -0,0 +1,13 @@

+{
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "lib": ["esnext", "dom"],
+    "types": ["@dcloudio/types"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from "vite";
+import uni from "@dcloudio/vite-plugin-uni";
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [uni()],
+});