feat: 初始化项目配置和样式- 添加项目环境变量配置文件 (.env)

- 创建代码忽略文件列表 (.gitignore)
- 设置代码格式化规则 (.prettierrc)- 添加各种样式文件，包括背景、边框、按钮、卡片等组件样式
- 创建暗黑主题样式文件
- 添加表单和代码样式文件

sheep/components/s-auth-modal/components/account-login.vue

@@ -0,0 +1,111 @@
+<!-- 账号密码登录 accountLogin  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60 ss-flex-col">
+      <view class="ss-flex ss-m-b-20">
+        <view class="head-title-active head-title-line" @tap="showAuthModal('smsLogin')">
+          短信登录
+        </view>
+        <view class="head-title ss-m-r-40 head-title-animation">账号登录</view>
+      </view>
+      <view class="head-subtitle">如果未设置过密码，请点击忘记密码</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="accountLoginRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="mobile" label="账号">
+        <uni-easyinput placeholder="请输入账号" v-model="state.model.mobile" :inputBorder="false">
+          <template v-slot:right>
+            <button class="ss-reset-button forgot-btn" @tap="showAuthModal('resetPassword')">
+              忘记密码
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="password" label="密码">
+        <uni-easyinput
+          type="password"
+          placeholder="请输入密码"
+          v-model="state.model.password"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="accountLoginSubmit">登录</button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+  </view>
+</template>
+
+<script setup>
+  import { ref, reactive, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { mobile, password } from '@/sheep/validate/form';
+  import { showAuthModal, closeAuthModal } from '@/sheep/hooks/useModal';
+  import AuthUtil from '@/sheep/api/member/auth';
+
+  const accountLoginRef = ref(null);
+
+  const emits = defineEmits(['onConfirm']);
+
+  const props = defineProps({
+    agreeStatus: {
+      type: [Boolean, null],
+      default: null,
+    },
+  });
+
+  // 数据
+  const state = reactive({
+    model: {
+      mobile: '', // 账号
+      password: '', // 密码
+    },
+    rules: {
+      mobile,
+      password,
+    },
+  });
+
+  // 账号登录
+  async function accountLoginSubmit() {
+    // 表单验证
+    const validate = await unref(accountLoginRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) return;
+
+    // 检查协议状态
+    if (props.agreeStatus !== true) {
+      emits('onConfirm', true);
+      if (props.agreeStatus === false) {
+        sheep.$helper.toast('您已拒绝协议，无法继续登录');
+      } else {
+        sheep.$helper.toast('请选择是否同意协议');
+      }
+      return;
+    }
+
+    // 提交数据
+    const { code, data } = await AuthUtil.login(state.model);
+    if (code === 0) {
+      closeAuthModal();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>

sheep/components/s-auth-modal/components/change-mobile.vue

@@ -0,0 +1,127 @@
+<!-- 绑定/更换手机号 changeMobile  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60">
+      <view class="head-title ss-m-b-20">
+        {{ userInfo.mobile ? '更换手机号' : '绑定手机号' }}
+      </view>
+      <view class="head-subtitle">为了您的账号安全，请使用本人手机号码</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="changeMobileRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="mobile" label="手机号">
+        <uni-easyinput
+          placeholder="请输入手机号"
+          v-model="state.model.mobile"
+          :inputBorder="false"
+          type="number"
+        >
+          <template v-slot:right>
+            <button
+              class="ss-reset-button code-btn-start"
+              :disabled="state.isMobileEnd"
+              :class="{ 'code-btn-end': state.isMobileEnd }"
+              @tap="getSmsCode('changeMobile', state.model.mobile)"
+            >
+              {{ getSmsTimer('changeMobile') }}
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="code" label="验证码">
+        <uni-easyinput
+          placeholder="请输入验证码"
+          v-model="state.model.code"
+          :inputBorder="false"
+          type="number"
+          maxlength="4"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="changeMobileSubmit">
+              确认
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+
+    <!-- 微信独有：读取手机号 -->
+    <button
+      v-if="'WechatMiniProgram' === sheep.$platform.name"
+      class="ss-reset-button type-btn"
+      open-type="getPhoneNumber"
+      @getphonenumber="getPhoneNumber"
+    >
+      使用微信手机号
+    </button>
+  </view>
+</template>
+
+<script setup>
+  import { computed, ref, reactive, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { code, mobile } from '@/sheep/validate/form';
+  import { closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+  import UserApi from '@/sheep/api/member/user';
+
+  const changeMobileRef = ref(null);
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+
+  // 数据
+  const state = reactive({
+    isMobileEnd: false, // 手机号输入完毕
+    model: {
+      mobile: '', // 手机号
+      code: '', // 验证码
+    },
+    rules: {
+      code,
+      mobile,
+    },
+  });
+
+  // 绑定手机号
+  async function changeMobileSubmit() {
+    const validate = await unref(changeMobileRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) {
+      return;
+    }
+    // 提交更新请求
+    const { code } = await UserApi.updateUserMobile(state.model);
+    if (code !== 0) {
+      return;
+    }
+    sheep.$store('user').getInfo();
+    closeAuthModal();
+  }
+
+  // 使用微信手机号
+  async function getPhoneNumber(e) {
+    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
+      return;
+    }
+    const result = await sheep.$platform.useProvider().bindUserPhoneNumber(e.detail);
+    if (result) {
+      sheep.$store('user').getInfo();
+      closeAuthModal();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>

sheep/components/s-auth-modal/components/change-password.vue

@@ -0,0 +1,106 @@
+<!-- 修改密码（登录时）  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60">
+      <view class="head-title ss-m-b-20">修改密码</view>
+      <view class="head-subtitle">如密码丢失或未设置,请点击忘记密码重新设置</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="changePasswordRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="code" label="验证码">
+        <uni-easyinput
+          placeholder="请输入验证码"
+          v-model="state.model.code"
+          type="number"
+          maxlength="4"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button
+              class="ss-reset-button code-btn code-btn-start"
+              :disabled="state.isMobileEnd"
+              :class="{ 'code-btn-end': state.isMobileEnd }"
+              @tap="getSmsCode('changePassword')"
+            >
+              {{ getSmsTimer('resetPassword') }}
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="reNewPassword" label="密码">
+        <uni-easyinput
+          type="password"
+          placeholder="请输入密码"
+          v-model="state.model.password"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="changePasswordSubmit">
+              确认
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+
+    <button class="ss-reset-button type-btn" @tap="closeAuthModal">
+      取消修改
+    </button>
+  </view>
+</template>
+
+<script setup>
+  import { ref, reactive, unref } from 'vue';
+  import { code, password } from '@/sheep/validate/form';
+  import { closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+  import UserApi from '@/sheep/api/member/user';
+
+  const changePasswordRef = ref(null);
+
+  // 数据
+  const state = reactive({
+    model: {
+      mobile: '', // 手机号
+      code: '', // 验证码
+      password: '', // 密码
+    },
+    rules: {
+      code,
+      password,
+    },
+  });
+
+  // 更改密码
+  async function changePasswordSubmit() {
+    // 参数校验
+    const validate = await unref(changePasswordRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) {
+      return;
+    }
+    // 发起请求
+    const { code } = await UserApi.updateUserPassword(state.model);
+    if (code !== 0) {
+      return;
+    }
+    // 成功后，只需要关闭弹窗
+    closeAuthModal();
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>

sheep/components/s-auth-modal/components/mp-authorization.vue

@@ -0,0 +1,152 @@
+<!-- 微信授权信息 mpAuthorization  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60 ss-flex-col">
+      <view class="ss-flex ss-m-b-20">
+        <view class="head-title ss-m-r-40 head-title-animation">授权信息</view>
+      </view>
+      <view class="head-subtitle">完善您的头像、昵称、手机号</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="accountLoginRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <!-- 获取头像昵称：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html -->
+      <uni-forms-item name="avatar" label="头像">
+        <button
+          class="ss-reset-button avatar-btn"
+          open-type="chooseAvatar"
+          @chooseavatar="onChooseAvatar"
+        >
+          <image
+            class="avatar-img"
+            :src="sheep.$url.cdn(state.model.avatar)"
+            mode="aspectFill"
+            @tap="sheep.$router.go('/pages/user/info')"
+          />
+          <text class="cicon-forward" />
+        </button>
+      </uni-forms-item>
+      <uni-forms-item name="nickname" label="昵称">
+        <uni-easyinput
+          type="nickname"
+          placeholder="请输入昵称"
+          v-model="state.model.nickname"
+          :inputBorder="false"
+        />
+      </uni-forms-item>
+      <view class="foot-box">
+        <button class="ss-reset-button authorization-btn" @tap="onConfirm"> 确认授权 </button>
+      </view>
+    </uni-forms>
+  </view>
+</template>
+
+<script setup>
+  import { computed, ref, reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { closeAuthModal } from '@/sheep/hooks/useModal';
+  import FileApi from '@/sheep/api/infra/file';
+  import UserApi from '@/sheep/api/member/user';
+
+  const props = defineProps({
+    agreeStatus: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+
+  const accountLoginRef = ref(null);
+
+  // 数据
+  const state = reactive({
+    model: {
+      nickname: userInfo.value.nickname,
+      avatar: userInfo.value.avatar,
+    },
+    rules: {},
+    disabledStyle: {
+      color: '#999',
+      disableColor: '#fff',
+    },
+  });
+
+  // 选择头像（来自微信）
+  function onChooseAvatar(e) {
+    const tempUrl = e.detail.avatarUrl || '';
+    uploadAvatar(tempUrl);
+  }
+
+  // 选择头像（来自文件系统）
+  async function uploadAvatar(tempUrl) {
+    if (!tempUrl) {
+      return;
+    }
+    let { data } = await FileApi.uploadFile(tempUrl);
+    state.model.avatar = data;
+  }
+
+  // 确认授权
+  async function onConfirm() {
+    const { model } = state;
+    const { nickname, avatar } = model;
+    if (!nickname) {
+      sheep.$helper.toast('请输入昵称');
+      return;
+    }
+    if (!avatar) {
+      sheep.$helper.toast('请选择头像');
+      return;
+    }
+    // 发起更新
+    const { code } = await UserApi.updateUser({
+      avatar: state.model.avatar,
+      nickname: state.model.nickname,
+    });
+    // 更新成功
+    if (code === 0) {
+      sheep.$helper.toast('授权成功');
+      await sheep.$store('user').getInfo();
+      closeAuthModal();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+
+  .foot-box {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .authorization-btn {
+    width: 686rpx;
+    height: 80rpx;
+    background-color: var(--ui-BG-Main);
+    border-radius: 40rpx;
+    color: #fff;
+  }
+  .avatar-img {
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 36rpx;
+  }
+  .cicon-forward {
+    font-size: 30rpx;
+    color: #595959;
+  }
+  .avatar-btn {
+    width: 100%;
+    justify-content: space-between;
+  }
+</style>

sheep/components/s-auth-modal/components/reset-password.vue

@@ -0,0 +1,127 @@
+<!-- 重置密码（未登录时）  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60">
+      <view class="head-title ss-m-b-20">重置密码</view>
+      <view class="head-subtitle">为了您的账号安全，设置密码前请先进行安全验证</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="resetPasswordRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="mobile" label="手机号">
+        <uni-easyinput
+          placeholder="请输入手机号"
+          v-model="state.model.mobile"
+          type="number"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button
+              class="ss-reset-button code-btn code-btn-start"
+              :disabled="state.isMobileEnd"
+              :class="{ 'code-btn-end': state.isMobileEnd }"
+              @tap="getSmsCode('resetPassword', state.model.mobile)"
+            >
+              {{ getSmsTimer('resetPassword') }}
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="code" label="验证码">
+        <uni-easyinput
+          placeholder="请输入验证码"
+          v-model="state.model.code"
+          type="number"
+          maxlength="4"
+          :inputBorder="false"
+        />
+      </uni-forms-item>
+
+      <uni-forms-item name="password" label="密码">
+        <uni-easyinput
+          type="password"
+          placeholder="请输入密码"
+          v-model="state.model.password"
+          :inputBorder="false"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="resetPasswordSubmit">
+              确认
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+
+    <button
+      v-if="!isLogin"
+      class="ss-reset-button type-btn"
+      @tap="
+        () => {
+          sheep.$router.go('/pages/login/index', {}, { redirect: true });
+        }
+      "
+    >
+      返回登录
+    </button>
+  </view>
+</template>
+
+<script setup>
+  import { computed, ref, reactive, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { code, mobile, password } from '@/sheep/validate/form';
+  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+  import UserApi from '@/sheep/api/member/user';
+
+  const resetPasswordRef = ref(null);
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+
+  // 数据
+  const state = reactive({
+    isMobileEnd: false, // 手机号输入完毕
+    model: {
+      mobile: '', // 手机号
+      code: '', // 验证码
+      password: '', // 密码
+    },
+    rules: {
+      code,
+      mobile,
+      password,
+    },
+  });
+
+  // 重置密码
+  const resetPasswordSubmit = async () => {
+    // 参数校验
+    const validate = await unref(resetPasswordRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) {
+      return;
+    }
+    // 发起请求
+    const { code } = await UserApi.resetUserPassword(state.model);
+    if (code !== 0) {
+      return;
+    }
+    // 成功后，用户重新登录
+    sheep.$router.go('/pages/login/index', {}, { redirect: true });
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>

sheep/components/s-auth-modal/components/sms-login.vue

@@ -0,0 +1,138 @@
+<!-- 短信登录 - smsLogin  -->
+<template>
+  <view>
+    <!-- 标题栏 -->
+    <view class="head-box ss-m-b-60">
+      <view class="ss-flex ss-m-b-20">
+        <view class="head-title head-title-line head-title-animation">短信登录</view>
+        <view class="head-title-active ss-m-r-40" @tap="showAuthModal('accountLogin')">
+          账号登录
+        </view>
+      </view>
+      <view class="head-subtitle">未注册的手机号，验证后自动注册账号</view>
+    </view>
+
+    <!-- 表单项 -->
+    <uni-forms
+      ref="smsLoginRef"
+      v-model="state.model"
+      :rules="state.rules"
+      validateTrigger="bind"
+      labelWidth="140"
+      labelAlign="center"
+    >
+      <uni-forms-item name="mobile" label="手机号">
+        <uni-easyinput
+          placeholder="请输入手机号"
+          v-model="state.model.mobile"
+          :inputBorder="false"
+          type="number"
+        >
+          <template v-slot:right>
+            <button
+              class="ss-reset-button code-btn code-btn-start"
+              :disabled="state.isMobileEnd || props.agreeStatus === false"
+              :class="{ 'code-btn-end': state.isMobileEnd || props.agreeStatus === false }"
+              @tap="checkAgreementAndGetSmsCode"
+            >
+              {{ getSmsTimer('smsLogin') }}
+            </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+
+      <uni-forms-item name="code" label="验证码">
+        <uni-easyinput
+          placeholder="请输入验证码"
+          v-model="state.model.code"
+          :inputBorder="false"
+          type="number"
+          maxlength="4"
+        >
+          <template v-slot:right>
+            <button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit"> 登录 </button>
+          </template>
+        </uni-easyinput>
+      </uni-forms-item>
+    </uni-forms>
+  </view>
+</template>
+
+<script setup>
+  import { ref, reactive, unref } from 'vue';
+  import sheep from '@/sheep';
+  import { code, mobile } from '@/sheep/validate/form';
+  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+  import AuthUtil from '@/sheep/api/member/auth';
+
+  const smsLoginRef = ref(null);
+
+  const emits = defineEmits(['onConfirm']);
+
+  const props = defineProps({
+    agreeStatus: {
+      type: [Boolean, null],
+      default: null,
+    },
+  });
+
+  // 数据
+  const state = reactive({
+    isMobileEnd: false, // 手机号输入完毕
+    codeText: '获取验证码',
+    model: {
+      mobile: '', // 手机号
+      code: '', // 验证码
+    },
+    rules: {
+      code,
+      mobile,
+    },
+  });
+
+  // 检查协议并获取验证码
+  function checkAgreementAndGetSmsCode() {
+    if (props.agreeStatus !== true) {
+      emits('onConfirm', true);
+      if (props.agreeStatus === false) {
+        sheep.$helper.toast('您已拒绝协议，无法发送验证码');
+      } else {
+        sheep.$helper.toast('请选择是否同意协议');
+      }
+      return;
+    }
+    getSmsCode('smsLogin', state.model.mobile);
+  }
+
+  // 短信登录
+  async function smsLoginSubmit() {
+    // 参数校验
+    const validate = await unref(smsLoginRef)
+      .validate()
+      .catch((error) => {
+        console.log('error: ', error);
+      });
+    if (!validate) {
+      return;
+    }
+    // 检查协议状态
+    if (props.agreeStatus !== true) {
+      emits('onConfirm', true);
+      if (props.agreeStatus === false) {
+        sheep.$helper.toast('您已拒绝协议，无法继续登录');
+      } else {
+        sheep.$helper.toast('请选择是否同意协议');
+      }
+      return;
+    }
+    // 提交数据
+    const { code } = await AuthUtil.smsLogin(state.model);
+    if (code === 0) {
+      closeAuthModal();
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../index.scss';
+</style>