@atooyu/uxto-fronted 1.0.0

package/example/src/pages/uxto/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <view class="page-container">
+    <!-- 底部导航 -->
+    <u-tabbar
+      v-model="activeTab"
+      center-brand="U"
+      center-label="UXTO"
+      :left-tab="{ label: '首页', icon: '⌂', value: 'home' }"
+      :center-tab="{ label: 'UXTO', icon: 'U', value: 'uxto' }"
+      :right-tab="{ label: '我的', icon: '◉', value: 'mine' }"
+      @tab-change="onTabChange"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeTab = ref('uxto')
+
+const onTabChange = (tab: string) => {
+  if (tab === 'home') {
+    uni.redirectTo({ url: '/pages/home/index' })
+  } else if (tab === 'mine') {
+    uni.redirectTo({ url: '/pages/mine/index' })
+  }
+}
+</script>
+
+<style>
+.page-container {
+  min-height: 100vh;
+  background: #f7f8fa;
+  padding-bottom: 120rpx;
+}
+
+.header {
+  padding: 80rpx 40rpx 60rpx;
+  text-align: center;
+  background: linear-gradient(135deg, #12b6af 0%, #9fe4dd 100%);
+}
+
+.title {
+  display: block;
+  font-size: 64rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.subtitle {
+  display: block;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.9);
+  margin-top: 16rpx;
+}
+
+.demo-section {
+  margin: 24rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.section-title {
+  display: block;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  padding: 24rpx;
+  background: #fff;
+}
+
+.content-card {
+  background: #fff;
+  padding: 24rpx;
+}
+
+.desc {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.feature-list {
+  background: #fff;
+  padding: 24rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+}
+
+.feature-item {
+  width: calc(50% - 10rpx);
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 20rpx;
+  background: #f7f8fa;
+  border-radius: 12rpx;
+}
+
+.feature-icon {
+  font-size: 36rpx;
+}
+
+.feature-text {
+  font-size: 28rpx;
+  color: #333;
+}
+</style>

package/example/src/pages.json

@@ -0,0 +1,28 @@
+{
+  "pages": [
+    {
+      "path": "pages/home/index",
+      "style": { "navigationBarTitleText": "首页" }
+    },
+    {
+      "path": "pages/uxto/index",
+      "style": { "navigationBarTitleText": "UXTO" }
+    },
+    {
+      "path": "pages/mine/index",
+      "style": { "navigationBarTitleText": "我的" }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "UXTO Example",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#f7f8fa"
+  },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uxto-ui/u-$1/u-$1.vue"
+    }
+  }
+}

package/example/src/stores/index.ts

@@ -0,0 +1 @@
+export { useThemeStore } from './theme'

package/example/src/stores/theme.ts

@@ -0,0 +1,95 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useThemeStore = defineStore('theme', () => {
+  // 暗黑模式 - 深邃墨蓝，沉浸式夜间体验
+  const darkMode = ref(false)
+
+  // 灰色模式 - 温柔灰调，护眼阅读体验
+  const grayMode = ref(false)
+
+  // 初始化时从本地存储加载
+  const loadFromStorage = () => {
+    const savedDarkMode = uni.getStorageSync('darkMode')
+    const savedGrayMode = uni.getStorageSync('grayMode')
+
+    if (savedDarkMode !== '') {
+      darkMode.value = savedDarkMode === true || savedDarkMode === 'true'
+    }
+    if (savedGrayMode !== '') {
+      grayMode.value = savedGrayMode === true || savedGrayMode === 'true'
+    }
+
+    applyTheme()
+  }
+
+  // 应用主题到页面根元素
+  const applyTheme = () => {
+    // #ifdef H5
+    const root = document.documentElement
+    root.classList.remove('dark-mode', 'gray-mode')
+
+    if (darkMode.value) {
+      root.classList.add('dark-mode')
+    } else if (grayMode.value) {
+      root.classList.add('gray-mode')
+    }
+    // #endif
+
+    uni.setStorageSync('currentThemeMode', {
+      dark: darkMode.value,
+      gray: grayMode.value
+    })
+  }
+
+  // 切换暗黑模式
+  const toggleDarkMode = () => {
+    darkMode.value = !darkMode.value
+    if (darkMode.value && grayMode.value) {
+      grayMode.value = false
+    }
+    uni.setStorageSync('darkMode', darkMode.value)
+    applyTheme()
+  }
+
+  // 切换灰色模式
+  const toggleGrayMode = () => {
+    grayMode.value = !grayMode.value
+    if (grayMode.value && darkMode.value) {
+      darkMode.value = false
+    }
+    uni.setStorageSync('grayMode', grayMode.value)
+    applyTheme()
+  }
+
+  // 设置暗黑模式
+  const setDarkMode = (value: boolean) => {
+    darkMode.value = value
+    if (value && grayMode.value) {
+      grayMode.value = false
+    }
+    uni.setStorageSync('darkMode', value)
+    applyTheme()
+  }
+
+  // 设置灰色模式
+  const setGrayMode = (value: boolean) => {
+    grayMode.value = value
+    if (value && darkMode.value) {
+      darkMode.value = false
+    }
+    uni.setStorageSync('grayMode', value)
+    applyTheme()
+  }
+
+  return {
+    darkMode,
+    grayMode,
+    loadFromStorage,
+    toggleDarkMode,
+    toggleGrayMode,
+    setDarkMode,
+    setGrayMode,
+    applyTheme
+  }
+})

package/example/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "paths": { "@/*": ["./src/*"] },
+    "types": ["@dcloudio/types", "@types/node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}

package/example/vite.config.js

@@ -0,0 +1,30 @@
+const { defineConfig } = require('vite')
+const uni = require('@dcloudio/vite-plugin-uni').default
+const path = require('path')
+
+const uxtoUiComponentsPath = path.resolve(__dirname, '../../uxto-ui/src/components').replace(/\\/g, '/')
+const variablesPath = path.resolve(__dirname, '../../uxto-ui/src/styles/variables.scss').replace(/\\/g, '/')
+
+module.exports = defineConfig({
+  plugins: [uni()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src').replace(/\\/g, '/'),
+      'uxto-ui': uxtoUiComponentsPath
+    },
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        additionalData: `@import "${variablesPath}";`,
+        silenceDeprecations: ['import', 'legacy-js-api']
+      }
+    }
+  }
+})

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@atooyu/uxto-fronted",
+  "version": "1.0.0",
+  "description": "UXTO UniApp 前端脚手架模板 - 支持 iOS、Android、鸿蒙",
+  "keywords": [
+    "uxto",
+    "uniapp",
+    "scaffold",
+    "template",
+    "vue3",
+    "typescript",
+    "mobile",
+    "ios",
+    "android",
+    "harmony",
+    "cross-platform"
+  ],
+  "author": "atooyu <chujingu@163.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atooyu/uxto-fronted.git"
+  },
+  "bugs": {
+    "url": "https://github.com/atooyu/uxto-fronted/issues"
+  },
+  "homepage": "https://github.com/atooyu/uxto-fronted#readme",
+  "files": [
+    "template",
+    "example",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"Run tests in template or example directory\""
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "peerDependencies": {
+    "@atooyu/uxto-cli": "^1.0.0"
+  }
+}

package/template/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <title>UXTO</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "{{name}}",
+  "version": "1.0.0",
+  "description": "{{description}}",
+  "private": true,
+  "scripts": {
+    "dev:h5": "uni",
+    "dev:app": "uni -p app",
+    "dev:mp-weixin": "uni -p mp-weixin",
+    "dev:harmony": "uni -p app-harmony",
+    "build:h5": "uni build",
+    "build:app": "uni build -p app",
+    "build:mp-weixin": "uni build -p mp-weixin",
+    "build:harmony": "uni build -p app-harmony"
+  },
+  "dependencies": {
+    "@atooyu/uxto-ui": "^1.0.0",
+    "@dcloudio/uni-app": "3.0.0-4060620250520001",
+    "@dcloudio/uni-app-harmony": "3.0.0-4060620250520001",
+    "@dcloudio/uni-components": "3.0.0-4060620250520001",
+    "@dcloudio/uni-h5": "3.0.0-4060620250520001",
+    "vue": "^3.5.13",
+    "pinia": "^2.1.7"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.14",
+    "@dcloudio/uni-automator": "3.0.0-4060620250520001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4060620250520001",
+    "@dcloudio/uni-stacktracey": "3.0.0-4060620250520001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4060620250520001",
+    "@types/node": "^22.13.10",
+    "sass": "^1.85.1",
+    "typescript": "^5.8.2",
+    "vite": "^5.2.8"
+  },
+  "author": "{{author}}"
+}

package/template/src/App.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { useThemeStore } from '@/stores/theme'
+
+export default {
+  onLaunch: function() {
+    console.log('UXTO Frontend Launch')
+    // 加载主题配置
+    const themeStore = useThemeStore()
+    themeStore.loadFromStorage()
+  },
+  onShow: function() {
+    console.log('UXTO Frontend Show')
+  },
+  onHide: function() {
+    console.log('UXTO Frontend Hide')
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/styles/index.scss";
+</style>

package/template/src/assets/styles/index.scss

@@ -0,0 +1,213 @@
+/* UXTO Frontend 全局样式 */
+
+/* ============================================
+   默认模式 - 明亮清新
+   ============================================ */
+:root {
+  --color-primary: #1989fa;
+  --color-success: #07c160;
+  --color-warning: #ff976a;
+  --color-danger: #ee0a24;
+  --color-info: #969799;
+
+  --text-color: #323233;
+  --text-color-2: #646566;
+  --text-color-3: #969799;
+
+  --bg-color: #f7f8fa;
+  --bg-color-2: #ffffff;
+  --bg-color-3: #f5f5f5;
+
+  --border-color: #ebedf0;
+  --shadow-color: rgba(0, 0, 0, 0.08);
+
+  --card-bg: #ffffff;
+  --header-bg: linear-gradient(135deg, #1989fa 0%, #07c160 100%);
+  --input-bg: #ffffff;
+  --switch-bg: #e5e5e5;
+}
+
+/* ============================================
+   暗黑模式 - 深邃墨蓝，沉浸式夜间体验
+   带有微妙光晕效果，营造高级感
+   ============================================ */
+.dark-mode,
+[data-theme="dark"] {
+  --color-primary: #58a6ff;
+  --color-success: #3fb950;
+  --color-warning: #f0883e;
+  --color-danger: #f85149;
+  --color-info: #8b949e;
+
+  --text-color: #c9d1d9;
+  --text-color-2: #8b949e;
+  --text-color-3: #6e7681;
+
+  --bg-color: #0d1117;
+  --bg-color-2: #161b22;
+  --bg-color-3: #21262d;
+
+  --border-color: #30363d;
+  --shadow-color: rgba(0, 0, 0, 0.4);
+
+  --card-bg: #161b22;
+  --header-bg: linear-gradient(135deg, #1f3a5f 0%, #0d2137 100%);
+  --input-bg: #21262d;
+  --switch-bg: #21262d;
+}
+
+/* 暗黑模式特殊样式 */
+.dark-mode page,
+[data-theme="dark"] page {
+  background-color: var(--bg-color);
+}
+
+.dark-mode .page-container,
+[data-theme="dark"] .page-container {
+  background: var(--bg-color);
+}
+
+.dark-mode .card,
+.dark-mode .section,
+.dark-mode .menu-section,
+[data-theme="dark"] .card,
+[data-theme="dark"] .section,
+[data-theme="dark"] .menu-section {
+  background: var(--card-bg);
+  box-shadow: 0 2rpx 16rpx var(--shadow-color);
+}
+
+/* ============================================
+   灰色模式 - 温柔灰调，护眼阅读体验
+   降低对比度，营造书卷气息
+   ============================================ */
+.gray-mode,
+[data-theme="gray"] {
+  --color-primary: #737373;
+  --color-success: #525252;
+  --color-warning: #737373;
+  --color-danger: #737373;
+  --color-info: #a3a3a3;
+
+  --text-color: #525252;
+  --text-color-2: #737373;
+  --text-color-3: #a3a3a3;
+
+  --bg-color: #e5e5e5;
+  --bg-color-2: #f5f5f5;
+  --bg-color-3: #d4d4d4;
+
+  --border-color: #d4d4d4;
+  --shadow-color: rgba(0, 0, 0, 0.04);
+
+  --card-bg: #f5f5f5;
+  --header-bg: linear-gradient(135deg, #a3a3a3 0%, #d4d4d4 100%);
+  --input-bg: #f5f5f5;
+  --switch-bg: #d4d4d4;
+
+  /* 灰色模式全局滤镜 */
+  filter: grayscale(85%);
+}
+
+.gray-mode page,
+[data-theme="gray"] page {
+  background-color: var(--bg-color);
+}
+
+.gray-mode .page-container,
+[data-theme="gray"] .page-container {
+  background: var(--bg-color);
+}
+
+/* ============================================
+   重置样式
+   ============================================ */
+page {
+  background-color: var(--bg-color);
+  font-size: 28rpx;
+  color: var(--text-color);
+  line-height: 1.5;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* ============================================
+   通用类
+   ============================================ */
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-primary {
+  color: var(--color-primary);
+}
+
+.text-success {
+  color: var(--color-success);
+}
+
+.text-warning {
+  color: var(--color-warning);
+}
+
+.text-danger {
+  color: var(--color-danger);
+}
+
+/* ============================================
+   间距类
+   ============================================ */
+.p-20 {
+  padding: 20rpx;
+}
+
+.p-30 {
+  padding: 30rpx;
+}
+
+.mt-20 {
+  margin-top: 20rpx;
+}
+
+.mt-30 {
+  margin-top: 30rpx;
+}
+
+.mb-20 {
+  margin-bottom: 20rpx;
+}
+
+.mb-30 {
+  margin-bottom: 30rpx;
+}
+
+/* ============================================
+   主题切换动画
+   ============================================ */
+.theme-transition,
+.theme-transition *,
+.theme-transition *::before,
+.theme-transition *::after {
+  transition: all 0.3s ease !important;
+  transition-delay: 0s !important;
+}

package/template/src/env.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="@dcloudio/types" />
+
+// 声明全局 uni 对象
+declare const uni: UniNamespace.Uni
+declare const getCurrentPages: () => Page.PageInstance[]
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}
+
+interface ImportMetaEnv {
+  readonly VITE_APP_NAME: string
+  readonly VITE_API_BASE_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/template/src/main.ts

@@ -0,0 +1,12 @@
+import { createSSRApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  const pinia = createPinia()
+
+  app.use(pinia)
+
+  return { app }
+}