feat: ✨ 个人资料页面和控制台页面

.env.development

@@ -1,7 +1,7 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 
 # 项目运行的端口号
-VITE_APP_PORT = 4396
+VITE_APP_PORT = 4096
 
 # API 基础路径，开发环境下的请求前缀
 VITE_APP_BASE_API = '/dev-api'

src/pages.json

@@ -30,6 +30,12 @@
       "style": {
         "navigationBarTitleText": "登录"
       }
+    },
+    {
+      "path": "pages/mine/profile/index",
+      "style": {
+        "navigationBarTitleText": "个人资料"
+      }
     }
   ],
   "globalStyle": {

src/pages/mine/index.vue

@@ -7,13 +7,18 @@
           class="w-100rpx h-100rpx rounded-full"
           :src="isLogin ? userInfo!.avatar : defaultAvatar"
         />
-        <text class="ml-20rpx text-32rpx">{{
-          isLogin ? userInfo!.nickname : "您还未登录，请先登录"
-        }}</text>
+        <view class="ml-20rpx text-32rpx">
+          <text v-if="isLogin">{{ userInfo!.nickname }}</text>
+          <view v-else @click="goToLoginPage">
+            <text>您还未登录，请先</text
+            ><text class="cursor-pointer"> 登录 <wd-icon name="arrow-right" /> </text>
+          </view>
+        </view>
       </view>
       <view>
-        <text v-if="isLogin" @click="goToLoginPage"> 个人信息 <wd-icon name="arrow-right" /> </text>
-        <text v-else @click="goToLoginPage"> 去登录 <wd-icon name="arrow-right" /> </text>
+        <text v-if="isLogin" class="cursor-pointer" @click="goToProfile">
+          个人信息 <wd-icon name="arrow-right" />
+        </text>
       </view>
     </view>
     <view class="relative -top-[50px] p-[40rpx]">
@@ -36,7 +41,7 @@
           <wd-cell title="关于我们" icon="setting" @click="goToAbout">
             <wd-icon name="arrow-right" />
           </wd-cell>
-          <wd-cell title="应用设置" icon="setting" @click="goToSettings">
+          <wd-cell title="应用设置" icon="setting" clickable @click="goToSettings">
             <wd-icon name="arrow-right" />
           </wd-cell>
 
@@ -65,7 +70,7 @@ const goToLoginPage = () => {
 };
 
 const goToProfile = () => {
-  uni.navigateTo({ url: "/pages/profile/index" });
+  uni.navigateTo({ url: "/pages/mine/profile/index" });
 };
 const goToEditProfile = () => {
   uni.navigateTo({ url: "/pages/edit-profile/index" });
@@ -88,9 +93,14 @@ const handleLogout = () => {
 </script>
 
 <style lang="scss" scoped>
+/* stylelint-disable selector-type-no-unknown */
+page {
+  background: #f8f8f8;
+}
+/* stylelint-enable selector-type-no-unknown */
+
 .mine {
   height: 100%;
-  background: #f5f2f2;
   .header {
     display: flex;
     align-items: center;

src/pages/mine/profile/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <view>
+    <text>profile</text>
+  </view>
+</template>

src/pages/work/index.vue

@@ -1,5 +1,47 @@
 <template>
-  <view class="flex-center flex-col">
-    <text class="text-cyan font-bold text-lg">工作台</text>
+  <view class="work">
+    <!-- 父容器，用于包裹自闭合标签 -->
+    <view class="title-with-bar-container">
+      <view class="font-bold text-lg">工作</view>
+      <!-- 自闭合标签 -->
+      <view class="title-with-bar" />
+    </view>
+    <wd-grid border :column="4">
+      <wd-grid-item v-for="index in 8" :key="index" use-text-slot icon="picture">
+        <template #text>
+          <view class="text">自定义文字插槽</view>
+        </template>
+      </wd-grid-item>
+    </wd-grid>
   </view>
 </template>
+<script lang="ts" setup>
+const defaultAvatar = "/static/images/default-avatar.png";
+</script>
+
+<style lang="scss" scoped>
+/* stylelint-disable selector-type-no-unknown */
+page {
+  background: #f8f8f8;
+}
+/* stylelint-enable selector-type-no-unknown */
+.img {
+  width: 100%;
+  height: 90rpx;
+}
+.title-with-bar-container {
+  position: relative;
+  padding-left: 20px; // 留出竖杠的空间
+}
+
+.title-with-bar-container::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 10px;
+  height: 100%;
+  content: "";
+  background-color: blue;
+  border-radius: 10px; // 圆角
+}
+</style>

src/pages/work/user/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <view class="user">
+    <text class="text-cyan font-bold text-lg">用户</text>
+  </view>
+</template>
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+/* stylelint-disable selector-type-no-unknown */
+page {
+  background: #f8f8f8;
+}
+/* stylelint-enable selector-type-no-unknown */
+</style>