diff --git a/.cursor/rules/css-style-guide.mdc b/.cursor/rules/css-style-guide.mdc new file mode 100644 index 0000000..bff9f3d --- /dev/null +++ b/.cursor/rules/css-style-guide.mdc @@ -0,0 +1,250 @@ +--- +alwaysApply: true +--- + +# CSS样式与UnoCSS使用规范 + +## 样式选择原则 + +### UnoCSS原子类使用规则 + +- **≤5个原子类**: 直接使用UnoCSS原子类 +- **>5个原子类**: 必须提取为语义化CSS类，避免模板膨胀 + +```vue + + +``` + +### 优先使用UnoCSS预设shortcuts + +参考 [unocss.config.ts](mdc:unocss.config.ts) 中定义的shortcuts： + +```typescript +// 已定义的shortcuts，优先使用 +"flex-center": "flex justify-center items-center" +"flex-start": "flex justify-start items-center" +"flex-between": "flex justify-between items-center" +"flex-col-center": "flex flex-col items-center" +``` + +## CSS类命名规范 + +### BEM命名规范 + +严格遵循BEM (Block\_\_Element--Modifier) 命名规范： + +```scss +// Block: 独立的功能组件 +.user-profile { +} + +// Element: Block的子元素 +.user-profile__avatar { +} +.user-profile__action { +} +.user-profile__badge { +} + +// Modifier: Block或Element的状态/变体 +.user-profile--dark { +} +.user-profile__action--active { +} +``` + +### 命名要求 + +1. **使用简短、易理解的英文单词** +2. **符合业务场景语义** +3. **避免缩写，除非是通用缩写** + +```scss +// ✅ 好的命名 +.user-profile__action +.stats-card +.service-icon +.tool-item + +// ❌ 坏的命名 +.up-act +.sc +.si +.ti +``` + +## 样式组织原则 + +### 1. 复用性判断 + +- 同一组合在项目中出现 >3次 → 提取为语义化类 +- 具备明确语义的区域 → 提取为语义化类 +- 需要主题适配的样式 → 提取为语义化类 + +### 2. 常用组合添加到shortcuts + +当发现重复的原子类组合时，添加到 [unocss.config.ts](mdc:unocss.config.ts)： + +```typescript +shortcuts: [ + { + // 现有shortcuts... + + // 新增常用组合 + "card-container": "mx-30rpx my-20rpx bg-white rounded-16rpx shadow-sm", + "action-button": "flex-center w-70rpx h-70rpx bg-white bg-opacity-90 rounded-full", + }, +]; +``` + +### 3. 主题适配 + +使用wot-design-uni的CSS变量或自定义变量： + +```scss +// ✅ 使用主题变量 +.service-icon { + background-color: var(--wot-color-bg-light, #f3f4f6); +} + +// ✅ 响应式主题色 +:color="themeStore.isDark ? '#fff' : '#333'"; +``` + +### 4. 暗黑模式适配规则 + +#### 优先级顺序 + +1. **优先使用wot-design-uni内置变量** - 自动适配暗黑模式 +2. **使用项目 [theme.scss](mdc:src/styles/theme.scss) 定义的变量** - 统一管理主题色 +3. **最后考虑组件内部定义** - 仅用于特殊场景 + +#### 自定义主题变量定义 + +当需要自定义颜色时，必须在 [theme.scss](mdc:src/styles/theme.scss) 中定义： + +```scss +/* 在 theme.scss 中添加自定义变量 */ +:root, +page { + --custom-text-color: #333333; + --custom-bg-color: #ffffff; + --custom-border-color: #e5e7eb; +} + +.wot-theme-dark { + --custom-text-color: #ffffff; + --custom-bg-color: #1a1a1a; + --custom-border-color: #374151; +} +``` + +#### 组件中使用主题变量 + +```scss +// ✅ 推荐：使用wot内置变量 +.my-component { + background-color: var(--wot-card-bg); + color: var(--wot-color-text); +} + +// ✅ 推荐：使用theme.scss定义的变量 +.my-component { + background-color: var(--custom-bg-color); + border-color: var(--custom-border-color); +} + +// ❌ 避免：组件内部硬编码暗黑模式 +.my-component { + background-color: #ffffff; +} +.wot-theme-dark .my-component { + background-color: #1a1a1a; +} +``` + +#### 图标和文字颜色适配 + +```vue + + + +``` + +## 实践示例 + +### 数据统计卡片 + +```vue + + + + + 0.00 + 我的余额 + + + +``` + +### 用户操作按钮 + +```vue + + + +``` + +## 禁止项 + +❌ **不要在SCSS中重复定义UnoCSS已提供的工具类** +❌ **不要使用 `@apply` 指令** +❌ **不要把一次性样式放到全局** +❌ **不要使用非语义化的类名** +❌ **不要在模板中堆叠超过5个原子类** + +## 组件库样式覆盖 + +使用wot-design-uni组件时： + +- 使用 `custom-class` 传入类名 +- 使用 `:deep()` 进行样式穿透 +- 添加 `!important` 提升优先级 + +```vue + + 退出登录 + + + +``` diff --git a/components.d.ts b/components.d.ts index 5e5fb83..255c169 100644 --- a/components.d.ts +++ b/components.d.ts @@ -26,7 +26,6 @@ declare module 'vue' { WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default'] WdDivider: typeof import('wot-design-uni/components/wd-divider/wd-divider.vue')['default'] WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default'] - WdFormItem: typeof import('wot-design-uni/components/wd-form-item/wd-form-item.vue')['default'] WdGrid: typeof import('wot-design-uni/components/wd-grid/wd-grid.vue')['default'] WdGridItem: typeof import('wot-design-uni/components/wd-grid-item/wd-grid-item.vue')['default'] WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default'] @@ -35,10 +34,10 @@ declare module 'vue' { WdInput: typeof import('wot-design-uni/components/wd-input/wd-input.vue')['default'] WdLoading: typeof import('wot-design-uni/components/wd-loading/wd-loading.vue')['default'] WdMessageBox: typeof import('wot-design-uni/components/wd-message-box/wd-message-box.vue')['default'] - WdNavbar: typeof import('wot-design-uni/components/wd-navbar/wd-navbar.vue')['default'] WdNoticeBar: typeof import('wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue')['default'] WdNotify: typeof import('wot-design-uni/components/wd-notify/wd-notify.vue')['default'] WdPopup: typeof import('wot-design-uni/components/wd-popup/wd-popup.vue')['default'] + WdProgress: typeof import('wot-design-uni/components/wd-progress/wd-progress.vue')['default'] WdRadio: typeof import('wot-design-uni/components/wd-radio/wd-radio.vue')['default'] WdRadioGroup: typeof import('wot-design-uni/components/wd-radio-group/wd-radio-group.vue')['default'] WdStatusTip: typeof import('wot-design-uni/components/wd-status-tip/wd-status-tip.vue')['default'] @@ -47,9 +46,6 @@ declare module 'vue' { WdTabbar: typeof import('wot-design-uni/components/wd-tabbar/wd-tabbar.vue')['default'] WdTabbarItem: typeof import('wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue')['default'] WdTag: typeof import('wot-design-uni/components/wd-tag/wd-tag.vue')['default'] - WdText: typeof import('wot-design-uni/components/wd-text/wd-text.vue')['default'] - WdTextarea: typeof import('wot-design-uni/components/wd-textarea/wd-textarea.vue')['default'] WdToast: typeof import('wot-design-uni/components/wd-toast/wd-toast.vue')['default'] - WdUpload: typeof import('wot-design-uni/components/wd-upload/wd-upload.vue')['default'] } } diff --git a/package.json b/package.json index 78e3089..6958544 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "@vueuse/core": "9.13.0", "pinia": "^2.2.2", "vue": "^3.5.13", - "wot-design-uni": "^1.9.1" + "wot-design-uni": "^1.13.0" }, "devDependencies": { "@commitlint/cli": "^19.5.0", diff --git a/pages.config.ts b/pages.config.ts index dc26193..1f068ad 100644 --- a/pages.config.ts +++ b/pages.config.ts @@ -7,7 +7,7 @@ export default defineUniPages({ globalStyle: { navigationBarBackgroundColor: "@navBgColor", navigationBarTextStyle: "@navTxtStyle", - navigationBarTitleText: "Wot-Demo", + navigationBarTitleText: "vue-uniapp-template", backgroundColor: "@bgColor", backgroundTextStyle: "@bgTxtStyle", backgroundColorTop: "@bgColorTop", diff --git a/src/api/file.ts b/src/api/file.ts index 118880f..9cce1e7 100644 --- a/src/api/file.ts +++ b/src/api/file.ts @@ -1,5 +1,5 @@ import { getToken } from "@/utils/storage"; -import { ApiCode } from "@/enums/api-code.enum"; +import { ApiCode } from "@/enums/api-code-enum"; // H5 使用 VITE_APP_BASE_API 作为代理路径，其他平台使用 VITE_APP_API_URL 作为请求路径 let baseApi = import.meta.env.VITE_APP_API_URL; diff --git a/src/enums/api-code.enum.ts b/src/enums/api-code-enum.ts similarity index 100% rename from src/enums/api-code.enum.ts rename to src/enums/api-code-enum.ts diff --git a/src/layouts/tabbar.vue b/src/layouts/tabbar.vue index 47c417e..239a9b3 100644 --- a/src/layouts/tabbar.vue +++ b/src/layouts/tabbar.vue @@ -66,7 +66,17 @@ export default { diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue index 158359f..c5a182f 100644 --- a/src/pages/mine/index.vue +++ b/src/pages/mine/index.vue @@ -30,125 +30,144 @@ - - - + + - - - 2 + - - - 0.00 - 我的余额 - - - - 0 - 我的收藏 - - - - 0 - 浏览历史 - - + + + + + 0.00 + 我的余额 + + + + + 0 + 我的收藏 + + + + + 0 + 浏览历史 + + + + - - + + + + + + + + + + 个人资料 - 个人资料 - - - - + + + + + + + 常见问题 - 常见问题 - - - - + + + + + + + 问题反馈 - 问题反馈 - - - - + + + + + + + 关于我们 - 关于我们 - - - + + + - - + + + + + + + + + +