OfficeSystem/components/my/My.vue

<template>
  <view class="mine-page">
    <view 
      class="card settings-card"
      v-if="showPrivateSwitch"
    >
      <view class="setting-row">
        <text class="setting-label">私有视角</text>
        <uv-switch v-model="filterSelf" />
      </view>
      <text class="setting-desc">开启后仅展示分配给我的客户和任务数据</text>
    </view>

    <view class="card">

      <uv-button type="error" :plain="true" @click="onLogout" :loading="loading">
        退出登录
      </uv-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
import { logout } from '@/api/user'

const loading = ref(false)
const userStore = useUserStore()
const { privateView, userInfo } = storeToRefs(userStore)
const filterSelf = computed({
  get: () => privateView.value,
  set: (val) => userStore.setPrivateView(val)
})
const showPrivateSwitch = computed(() =>
  userInfo.value?.roles?.some(r => ['admin', 'sys_admin'].includes(r))
)

const onLogout = async () => {
  if (loading.value) return
  loading.value = true
  try {
    await logout()
  } catch (e) {
    // 忽略错误
  } finally {
    userStore.logout()
    uni.$uv.toast('已退出登录')
    setTimeout(() => {
      uni.reLaunch({ url: '/pages/login/index' })
    }, 200)
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.mine-page {

  background-color: #f6f7fb;

  box-sizing: border-box;
}

.card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
}

.settings-card {
  margin-bottom: 24rpx;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-label {
  font-size: 30rpx;
  font-weight: 500;
  color: #111827;
}

.setting-desc {
  margin-top: 14rpx;
  font-size: 24rpx;
  color: #6b7280;
}

.title {
  font-size: 30rpx;
  font-weight: 600;
  margin-bottom: 24rpx;
  color: #111827;
}
</style>