@atooyu/uxto-fronted 1.0.0

package/template/src/manifest.json

@@ -0,0 +1,69 @@
+{
+  "name": "uxto-frontend",
+  "appid": "__UNI__UXTO_FRONTEND",
+  "description": "UXTO 前端应用框架 - 支持 iOS、Android、鸿蒙",
+  "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.INTERNET\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>"
+        ]
+      },
+      "ios": {
+        "idfa": false
+      },
+      "sdkConfigs": {}
+    }
+  },
+  "quickapp": {},
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  },
+  "vueVersion": "3",
+  "app-harmony": {
+    "mode": "development",
+    "projectName": "UXTO",
+    "appSign": "",
+    "appDebug": true
+  },
+  "h5": {
+    "template": "index.html",
+    "router": {
+      "mode": "hash"
+    },
+    "optimization": {
+      "prefetch": true,
+      "preload": true
+    }
+  }
+}

package/template/src/pages/api/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <text class="title">API 示例</text>
+    </view>
+
+    <view class="content">
+      <text class="content-text">API 示例内容</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss">
+.page-container {
+  min-height: 100vh;
+  background: #f7f8fa;
+}
+
+.header {
+  padding: 40rpx;
+  text-align: center;
+
+  .title {
+    display: block;
+    font-size: 40rpx;
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.content {
+  padding: 40rpx;
+  text-align: center;
+
+  .content-text {
+    font-size: 28rpx;
+    color: #666;
+  }
+}
+</style>

package/template/src/pages/components/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <text class="title">组件示例</text>
+    </view>
+
+    <view class="content">
+      <text class="content-text">组件示例内容</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss">
+.page-container {
+  min-height: 100vh;
+  background: #f7f8fa;
+}
+
+.header {
+  padding: 40rpx;
+  text-align: center;
+
+  .title {
+    display: block;
+    font-size: 40rpx;
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.content {
+  padding: 40rpx;
+  text-align: center;
+
+  .content-text {
+    font-size: 28rpx;
+    color: #666;
+  }
+}
+</style>

package/template/src/pages/index/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <text class="title">UXTO Example</text>
+      <text class="subtitle">前端框架示例项目</text>
+    </view>
+
+    <view class="content">
+      <text class="content-text">欢迎使用 UXTO 前端框架</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss">
+.page-container {
+  min-height: 100vh;
+  background: #f7f8fa;
+}
+
+.header {
+  padding: 80rpx 40rpx 60rpx;
+  text-align: center;
+
+  .title {
+    display: block;
+    font-size: 52rpx;
+    font-weight: bold;
+    color: #1989fa;
+  }
+
+  .subtitle {
+    display: block;
+    font-size: 28rpx;
+    color: #999;
+    margin-top: 16rpx;
+  }
+}
+
+.content {
+  padding: 40rpx;
+  text-align: center;
+
+  .content-text {
+    font-size: 32rpx;
+    color: #666;
+  }
+}
+</style>

package/template/src/pages/store/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <text class="title">状态管理</text>
+    </view>
+
+    <view class="content">
+      <text class="content-text">状态管理示例内容</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss">
+.page-container {
+  min-height: 100vh;
+  background: #f7f8fa;
+}
+
+.header {
+  padding: 40rpx;
+  text-align: center;
+
+  .title {
+    display: block;
+    font-size: 40rpx;
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.content {
+  padding: 40rpx;
+  text-align: center;
+
+  .content-text {
+    font-size: 28rpx;
+    color: #666;
+  }
+}
+</style>

package/template/src/pages/tabbar/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <view class="tabbar-demo-page">
+    <!-- 环境光背景 -->
+    <view class="ambient"></view>
+
+    <!-- 内容区域 -->
+    <view class="content-area">
+      <!-- 首页内容 -->
+      <view v-if="activeTab === 'home'" class="card">
+        <text class="sub-title">首页</text>
+        <text class="title">欢迎回来</text>
+        <text class="desc">这里是首页内容区域</text>
+      </view>
+
+      <!-- UXTO内容 -->
+      <view v-else-if="activeTab === 'uxto'" class="card">
+        <text class="sub-title">UXTO</text>
+        <text class="title">图域中心</text>
+        <text class="desc">这里是UXTO内容区域</text>
+      </view>
+
+      <!-- 我的页面内容 -->
+      <view v-else class="card">
+        <text class="sub-title">我的</text>
+        <text class="title">个人中心</text>
+        <text class="desc">这里是"我的"页面</text>
+      </view>
+    </view>
+
+    <!-- 底部导航 -->
+    <u-tabbar
+      v-model="activeTab"
+      center-brand="TU"
+      center-label="图域"
+      :left-tab="{ label: '首页', icon: '⌂', value: 'home' }"
+      :center-tab="{ label: '图域', icon: 'TU', value: 'uxto' }"
+      :right-tab="{ label: '我的', icon: '◉', value: 'mine' }"
+      @tab-change="onTabChange"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeTab = ref('home')
+
+const onTabChange = (tab: string) => {
+  console.log('Tab changed:', tab)
+}
+</script>
+
+<style lang="scss" scoped>
+$--mint-1: #12b6af;
+$--mint-2: #9fe4dd;
+$--ink: #1b4d4a;
+
+.tabbar-demo-page {
+  position: relative;
+  width: 100%;
+  max-width: 430px;
+  min-height: 100vh;
+  margin: 0 auto;
+  overflow: hidden;
+  background: linear-gradient(180deg, #f2fcfb 0%, #e7f8f5 40%, #ddf4f0 100%);
+}
+
+.ambient {
+  position: absolute;
+  inset: -120px -40px auto;
+  height: 320px;
+  background: radial-gradient(circle at 50% 20%, rgba(18, 182, 175, 0.35) 0%, rgba(18, 182, 175, 0) 72%);
+  pointer-events: none;
+}
+
+.content-area {
+  position: relative;
+  z-index: 1;
+  padding: 30px 18px 120px;
+}
+
+.card {
+  border-radius: 20px;
+  padding: 18px;
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 14px 36px rgba(9, 100, 95, 0.15);
+}
+
+.sub-title {
+  display: block;
+  font-size: 13px;
+  letter-spacing: 2px;
+  color: #3f9892;
+}
+
+.title {
+  display: block;
+  margin: 10px 0 8px;
+  font-size: 28px;
+  color: $--ink;
+  font-weight: 700;
+}
+
+.desc {
+  display: block;
+  line-height: 1.6;
+  color: #4f7f7b;
+  font-size: 14px;
+}
+</style>

package/template/src/pages/utils/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="page-container">
+    <view class="header">
+      <text class="title">工具类</text>
+    </view>
+
+    <view class="content">
+      <text class="content-text">工具类示例内容</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss">
+.page-container {
+  min-height: 100vh;
+  background: #f7f8fa;
+}
+
+.header {
+  padding: 40rpx;
+  text-align: center;
+
+  .title {
+    display: block;
+    font-size: 40rpx;
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.content {
+  padding: 40rpx;
+  text-align: center;
+
+  .content-text {
+    font-size: 28rpx;
+    color: #666;
+  }
+}
+</style>

package/template/src/pages.json

@@ -0,0 +1,53 @@
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "示例中心"
+      }
+    },
+    {
+      "path": "pages/components/index",
+      "style": {
+        "navigationBarTitleText": "组件示例"
+      }
+    },
+    {
+      "path": "pages/api/index",
+      "style": {
+        "navigationBarTitleText": "API 示例"
+      }
+    },
+    {
+      "path": "pages/store/index",
+      "style": {
+        "navigationBarTitleText": "状态管理"
+      }
+    },
+    {
+      "path": "pages/utils/index",
+      "style": {
+        "navigationBarTitleText": "工具类"
+      }
+    },
+    {
+      "path": "pages/tabbar/index",
+      "style": {
+        "navigationBarTitleText": "底部导航",
+        "navigationStyle": "custom"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "UXTO Example",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#f7f8fa"
+  },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "@atooyu/uxto-ui/src/components/u-$1/u-$1.vue"
+    }
+  }
+}

package/template/src/static/tabbar/README.md

@@ -0,0 +1,30 @@
+# Tabbar 图标说明
+
+本目录用于存放底部导航栏的图标文件。
+
+## 需要的图标文件
+
+请准备以下 6 个图标文件：
+
+| 文件名 | 用途 | 建议尺寸 |
+|--------|------|---------|
+| home.png | 馨页图标（未选中） | 81x81 px |
+| home-active.png | 馨页图标（选中） | 81x81 px |
+| uxto.png | UXTO 图标（未选中） | 81x81 px |
+| uxto-active.png | UXTO 图标（选中） | 81x81 px |
+| mine.png | 我的图标（未选中） | 81x81 px |
+| mine-active.png | 我的图标（选中） | 81x81 px |
+
+## 设计规范
+
+- 未选中状态建议使用灰色（#999999）
+- 选中状态建议使用主题色（#1989fa）
+- 保持图标风格一致
+- 建议使用简洁的线性图标风格
+
+## 临时方案
+
+如果暂时没有图标文件，可以：
+1. 使用文字导航（在 pages.json 中不设置 iconPath）
+2. 使用占位图
+3. 使用图标字体

package/template/src/stores/cart.ts

@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+interface CartItem {
+  id: number
+  name: string
+  price: number
+  quantity: number
+}
+
+export const useCartStore = defineStore('cart', () => {
+  const items = ref<CartItem[]>([])
+
+  const totalItems = computed(() =>
+    items.value.reduce((total, item) => total + item.quantity, 0)
+  )
+
+  const totalPrice = computed(() =>
+    items.value.reduce((total, item) => total + item.price * item.quantity, 0)
+  )
+
+  const addItem = (item: CartItem) => {
+    const existingItem = items.value.find(i => i.id === item.id)
+    if (existingItem) {
+      existingItem.quantity += item.quantity
+    } else {
+      items.value.push(item)
+    }
+  }
+
+  const removeItem = (id: number) => {
+    const index = items.value.findIndex(item => item.id === id)
+    if (index > -1) {
+      items.value.splice(index, 1)
+    }
+  }
+
+  const clearCart = () => {
+    items.value = []
+  }
+
+  return {
+    items,
+    totalItems,
+    totalPrice,
+    addItem,
+    removeItem,
+    clearCart
+  }
+})

package/template/src/stores/counter.ts

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+
+  const doubleCount = computed(() => count.value * 2)
+
+  const increment = () => {
+    count.value++
+  }
+
+  const decrement = () => {
+    count.value--
+  }
+
+  const reset = () => {
+    count.value = 0
+  }
+
+  return {
+    count,
+    doubleCount,
+    increment,
+    decrement,
+    reset
+  }
+})

package/template/src/stores/index.ts

@@ -0,0 +1,4 @@
+export { useCounterStore } from './counter'
+export { useUserStore } from './user'
+export { useCartStore } from './cart'
+export { useThemeStore } from './theme'

package/template/src/stores/theme.ts

@@ -0,0 +1,100 @@
+import { defineStore } from 'pinia'
+import { ref, watch } 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 = () => {
+    // 在H5环境下操作document
+    // #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
+
+    // 在小程序/App环境下通过uni.setStorageSync传递给页面
+    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
+  }
+})