@atooyu/uxto-fronted 1.0.0

package/example/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@atooyu/uxto-example",
+  "version": "1.0.0",
+  "description": "UXTO Example",
+  "private": true,
+  "scripts": {
+    "postinstall": "patch-package",
+    "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": {
+    "@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",
+    "pinia": "^2.1.7",
+    "vue": "^3.5.13"
+  },
+  "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",
+    "patch-package": "^8.0.1",
+    "sass": "^1.85.1",
+    "typescript": "^5.8.2",
+    "vite": "^5.2.8"
+  }
+}

package/example/patches/@dcloudio+vite-plugin-uni+3.0.0-4060620250520001.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@dcloudio/vite-plugin-uni/dist/configResolved/plugins/resolveId.js b/node_modules/@dcloudio/vite-plugin-uni/dist/configResolved/plugins/resolveId.js
+index d5c7927..9574535 100644
+--- a/node_modules/@dcloudio/vite-plugin-uni/dist/configResolved/plugins/resolveId.js
++++ b/node_modules/@dcloudio/vite-plugin-uni/dist/configResolved/plugins/resolveId.js
+@@ -8,7 +8,7 @@ const path_1 = __importDefault(require("path"));
+ const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
+ // const debugResolve = debug('uni:resolve-id')
+ const BUILT_IN_MODULES = {
+-    'vue-router': 'dist/vue-router.esm-bundler.js',
++    'vue-router': '',
+     vuex: 'dist/vuex.esm-bundler.js',
+     'vue-i18n': 'dist/vue-i18n.esm-bundler.js',
+     '@dcloudio/uni-app': 'dist/uni-app.es.js',

package/example/src/App.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { useThemeStore } from '@/stores/theme'
+
+export default {
+  onLaunch() {
+    console.log('UXTO Example Launch')
+    const themeStore = useThemeStore()
+    themeStore.loadFromStorage()
+  },
+  onShow() { console.log('UXTO Example Show') },
+  onHide() { console.log('UXTO Example Hide') }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/styles/index.scss";
+
+button {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  &::after { border: none; }
+}
+</style>

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

@@ -0,0 +1,130 @@
+/* UXTO Example 全局样式 */
+
+/* ============================================
+   默认模式 - 明亮清新
+   ============================================ */
+: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;
+  --switch-bg: #e5e5e5;
+  --switch-active: #12b6af;
+}
+
+/* ============================================
+   暗黑模式 - 深邃墨蓝，沉浸式夜间体验
+   ============================================ */
+.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;
+  --switch-bg: #21262d;
+  --switch-active: #58a6ff;
+}
+
+.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);
+}
+
+.dark-mode .theme-switch-card,
+[data-theme="dark"] .theme-switch-card {
+  background: var(--card-bg);
+  border-color: var(--border-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;
+  --switch-bg: #d4d4d4;
+  --switch-active: #737373;
+
+  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;
+}

package/example/src/env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="@dcloudio/types" />
+
+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
+}

package/example/src/main.ts

@@ -0,0 +1,10 @@
+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 }
+}

package/example/src/manifest.json

@@ -0,0 +1,40 @@
+{
+  "name": "uxto-example",
+  "appid": "__UNI__UXTO_EXAMPLE",
+  "description": "UXTO 组件库示例项目",
+  "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\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>"
+        ]
+      },
+      "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": "UXTOExample", "appSign": "", "appDebug": true },
+  "h5": { "template": "index.html", "router": { "mode": "hash" }, "optimization": { "prefetch": true, "preload": true } }
+}

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

@@ -0,0 +1,74 @@
+
+<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'
+import UCell from 'uxto-ui/u-cell/u-cell.vue'
+import UCellGroup from 'uxto-ui/u-cell-group/u-cell-group.vue'
+
+const activeTab = ref('home')
+
+const onTabChange = (tab: string) => {
+  if (tab === 'uxto') {
+    uni.redirectTo({ url: '/pages/uxto/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: 60rpx 40rpx 40rpx;
+  text-align: center;
+  background: linear-gradient(135deg, #1989fa 0%, #07c160 100%);
+}
+
+.title {
+  display: block;
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.subtitle {
+  display: block;
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 12rpx;
+}
+
+.demo-section {
+  margin: 20rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.section-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  padding: 24rpx 24rpx 16rpx;
+  background: #fff;
+}
+</style>

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

@@ -0,0 +1,339 @@
+<template>
+  <view class="page-container">
+    <!-- 用户头部 -->
+    <view class="user-header">
+      <view class="avatar-ring">
+        <view class="avatar">
+          <text class="avatar-text">U</text>
+        </view>
+      </view>
+      <text class="username">UXTO 用户</text>
+      <text class="user-desc">体验多端开发的魅力</text>
+    </view>
+
+    <!-- 主题设置区域 -->
+    <view class="theme-section">
+      <text class="section-title">外观设置</text>
+
+      <!-- 暗黑模式开关 -->
+      <view class="theme-switch-card">
+        <view class="switch-icon dark-icon">
+          <text>🌙</text>
+        </view>
+        <view class="switch-info">
+          <text class="switch-label">暗黑模式</text>
+          <text class="switch-desc">深邃墨蓝，沉浸夜间</text>
+        </view>
+        <view class="switch-wrapper">
+          <u-switch
+            v-model="theme.darkMode"
+            :size="26"
+            @change="onDarkModeChange"
+          />
+        </view>
+      </view>
+
+      <!-- 灰色模式开关 -->
+      <view class="theme-switch-card">
+        <view class="switch-icon gray-icon">
+          <text>📖</text>
+        </view>
+        <view class="switch-info">
+          <text class="switch-label">灰色模式</text>
+          <text class="switch-desc">温柔灰调，护眼阅读</text>
+        </view>
+        <view class="switch-wrapper">
+          <u-switch
+            v-model="theme.grayMode"
+            :size="26"
+            @change="onGrayModeChange"
+          />
+        </view>
+      </view>
+
+      <!-- 模式提示 -->
+      <view class="mode-hint" v-if="theme.darkMode">
+        <text class="hint-text">✨ 暗黑模式已开启，享受沉浸体验</text>
+      </view>
+      <view class="mode-hint" v-else-if="theme.grayMode">
+        <text class="hint-text">📚 灰色模式已开启，护眼阅读更舒适</text>
+      </view>
+    </view>
+
+    <!-- 菜单区域 -->
+    <view class="menu-section">
+      <view class="menu-item" @click="handleMenuClick('profile')">
+        <text class="menu-icon">👤</text>
+        <text class="menu-text">个人资料</text>
+        <text class="menu-arrow">›</text>
+      </view>
+      <view class="menu-item" @click="handleMenuClick('settings')">
+        <text class="menu-icon">⚙️</text>
+        <text class="menu-text">账号设置</text>
+        <text class="menu-arrow">›</text>
+      </view>
+      <view class="menu-item" @click="handleMenuClick('notification')">
+        <text class="menu-icon">🔔</text>
+        <text class="menu-text">消息通知</text>
+        <text class="menu-arrow">›</text>
+      </view>
+    </view>
+
+    <view class="menu-section">
+      <view class="menu-item" @click="handleMenuClick('help')">
+        <text class="menu-icon">❓</text>
+        <text class="menu-text">帮助中心</text>
+        <text class="menu-arrow">›</text>
+      </view>
+      <view class="menu-item" @click="handleMenuClick('about')">
+        <text class="menu-icon">ℹ️</text>
+        <text class="menu-text">关于我们</text>
+        <text class="menu-arrow">›</text>
+      </view>
+    </view>
+
+    <!-- 底部导航 -->
+    <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'
+import { useThemeStore } from '@/stores/theme'
+
+const theme = useThemeStore()
+const activeTab = ref('mine')
+
+const onDarkModeChange = (value: boolean) => {
+  theme.setDarkMode(value)
+}
+
+const onGrayModeChange = (value: boolean) => {
+  theme.setGrayMode(value)
+}
+
+const onTabChange = (tab: string) => {
+  if (tab === 'home') {
+    uni.redirectTo({ url: '/pages/home/index' })
+  } else if (tab === 'uxto') {
+    uni.redirectTo({ url: '/pages/uxto/index' })
+  }
+}
+
+const handleMenuClick = (type: string) => {
+  uni.showToast({
+    title: `点击了${type}`,
+    icon: 'none'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background: var(--bg-color);
+  padding-bottom: 140rpx;
+  transition: background 0.3s ease;
+}
+
+// 用户头部
+.user-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80rpx 40rpx 60rpx;
+  background: linear-gradient(135deg, #1989fa 0%, #07c160 100%);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+    animation: float 8s ease-in-out infinite;
+  }
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0) rotate(0deg); }
+  50% { transform: translate(2%, 2%) rotate(5deg); }
+}
+
+.avatar-ring {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+}
+
+.avatar {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+}
+
+.avatar-text {
+  font-size: 52rpx;
+  font-weight: 700;
+  color: #1989fa;
+}
+
+.username {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #fff;
+  margin-top: 24rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.user-desc {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.85);
+  margin-top: 8rpx;
+  position: relative;
+  z-index: 1;
+}
+
+// 主题设置区域
+.theme-section {
+  margin: 32rpx 24rpx 24rpx;
+}
+
+.section-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: var(--text-color-2);
+  margin-bottom: 20rpx;
+  padding-left: 8rpx;
+}
+
+.theme-switch-card {
+  display: flex;
+  align-items: center;
+  background: var(--card-bg);
+  border-radius: 20rpx;
+  padding: 28rpx 24rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 4rpx 20rpx var(--shadow-color);
+  transition: all 0.3s ease;
+}
+
+.switch-icon {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  font-size: 36rpx;
+
+  &.dark-icon {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  }
+
+  &.gray-icon {
+    background: linear-gradient(135deg, #d4d4d4 0%, #e5e5e5 100%);
+  }
+}
+
+.switch-info {
+  flex: 1;
+}
+
+.switch-label {
+  display: block;
+  font-size: 30rpx;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.switch-desc {
+  display: block;
+  font-size: 24rpx;
+  color: var(--text-color-3);
+  margin-top: 4rpx;
+}
+
+.switch-wrapper {
+  transform: scale(1.1);
+}
+
+.mode-hint {
+  background: linear-gradient(135deg, rgba(25, 137, 250, 0.1) 0%, rgba(7, 193, 96, 0.1) 100%);
+  border-radius: 12rpx;
+  padding: 20rpx 24rpx;
+  margin-top: 8rpx;
+}
+
+.hint-text {
+  font-size: 24rpx;
+  color: var(--color-primary);
+}
+
+// 菜单区域
+.menu-section {
+  margin: 24rpx;
+  background: var(--card-bg);
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 20rpx var(--shadow-color);
+  transition: all 0.3s ease;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 32rpx 24rpx;
+  transition: background 0.2s ease;
+
+  &:not(:last-child) {
+    border-bottom: 1rpx solid var(--border-color);
+  }
+
+  &:active {
+    background: var(--bg-color-3);
+  }
+}
+
+.menu-icon {
+  font-size: 40rpx;
+  margin-right: 20rpx;
+}
+
+.menu-text {
+  flex: 1;
+  font-size: 30rpx;
+  color: var(--text-color);
+}
+
+.menu-arrow {
+  font-size: 32rpx;
+  color: var(--text-color-3);
+  font-weight: 300;
+}
+</style>