Skip to content

李宁 / Activity

Go to a project
Commit feb9372d by 李宁
Options

1

1 parent f7a34c31
Expand all
Inline Side-by-side
Showing 46 changed files with 1834 additions and 0 deletions
channelBusiManage/.editorconfig 0 → 100644
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
max_line_length = 100
channelBusiManage/.gitignore 0 → 100644
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.eslintcache
# Cypress
/cypress/videos/
/cypress/screenshots/
# Vitest
__screenshots__/
channelBusiManage/.prettierrc.json 0 → 100644
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 100
}
channelBusiManage/README.md 0 → 100644
**需求名称**
泛渠道-商机办结登记 需求V2.0
**需求地址**
https://jfq5tn3wbn.feishu.cn/docx/CYnqdTUYzoQ61gxOyE1cHfcGn6c
\ No newline at end of file
channelBusiManage/env.d.ts 0 → 100644
/// <reference types="vite/client" />
channelBusiManage/eslint.config.ts 0 → 100644
import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
export default defineConfigWithVueTs(
{
name: 'app/files-to-lint',
files: ['**/*.{ts,mts,tsx,vue}'],
},
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
pluginVue.configs['flat/essential'],
vueTsConfigs.recommended,
skipFormatting,
)
channelBusiManage/index.html 0 → 100644
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
channelBusiManage/package.json 0 → 100644
{
"name": "vue3-gig-platform",
"version": "0.0.0",
"private": true,
"type": "module",
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "eslint . --fix --cache",
"format": "prettier --write src/"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.2",
"@tailwindcss/typography": "^0.5.19",
"date-fns": "^4.1.0",
"element-plus": "^2.11.7",
"lucide-vue-next": "^0.552.0",
"pinia": "^3.0.3",
"vue": "^3.5.22",
"vue-router": "^4.6.3"
},
"devDependencies": {
"@tsconfig/node22": "^22.0.2",
"@types/node": "^22.18.11",
"@vitejs/plugin-vue": "^6.0.1",
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.6.0",
"@vue/tsconfig": "^0.8.1",
"autoprefixer": "^10.4.0",
"eslint": "^9.37.0",
"eslint-plugin-vue": "~10.5.0",
"jiti": "^2.6.1",
"npm-run-all2": "^8.0.4",
"postcss": "^8.4.0",
"prettier": "3.6.2",
"tailwindcss": "^3.4.0",
"typescript": "~5.9.0",
"vite": "^7.1.11",
"vite-plugin-vue-devtools": "^8.0.3",
"vue-tsc": "^3.1.1"
}
}
channelBusiManage/postcss.config.js 0 → 100644
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
channelBusiManage/project.md 0 → 100644
# Vue3 用户管理功能说明
## 📋 功能概述
用户管理模块已成功从React版本转换为Vue3版本，提供完整的用户管理功能，包括用户的创建、编辑、删除和状态管理。
## 🎯 核心功能
### 1. 用户列表展示
- ✅ 表格形式展示用户信息（登录账号、姓名、组织、角色、手机号、状态、创建时间）
- ✅ 当前登录用户特殊标识（高亮显示 + "当前登录"标签）
- ✅ 用户状态标签（正常/禁用）
- ✅ 统计信息显示（总用户数、筛选结果数）
### 2. 搜索和筛选
- ✅ 用户姓名模糊搜索
- ✅ 手机号模糊搜索
- ✅ 角色筛选（下拉选择）
- ✅ 状态筛选（全部/正常/禁用）
- ✅ 实时筛选结果更新
### 3. 新增用户
- ✅ 弹窗表单设计
- ✅ 必填字段验证（登录账号、用户姓名、密码、组织、角色）
- ✅ 用户名唯一性校验
- ✅ 组织树可视化选择
- ✅ 角色层级权限控制
- ✅ 用户状态开关控制
### 4. 编辑用户
- ✅ 预填充现有数据
- ✅ 登录账号不可修改
- ✅ 密码可选修改（留空表示不修改）
- ✅ 当前登录用户组织不可修改（安全限制）
- ✅ 角色变更时自动检查组织权限
### 5. 组织树选择器
- ✅ 三级组织架构（地市 → 区县 → 客户经理团队）
- ✅ 可展开/收起的树形结构
- ✅ 根据角色层级限制可选组织
- ✅ 视觉反馈（选中状态、不可选状态）
- ✅ 组织类型标签显示
### 6. 用户状态管理
- ✅ 启用/禁用用户功能
- ✅ 确认对话框提示
- ✅ 当前登录用户保护（不可禁用自己）
- ✅ 状态变更成功提示
### 7. 删除用户
- ✅ 删除确认对话框
- ✅ 当前登录用户保护（不可删除自己）
- ✅ 删除成功提示
## 🔧 技术实现
### 组件结构
```
UserManagement.vue # 主用户管理组件
├── OrganizationTree.vue # 组织树选择器组件
└── DesktopMain.vue # 主应用集成
```
### 数据结构
```typescript
// 用户数据结构
interface User {
id: string
username: string
realName: string
password?: string
organizationId: string
roleId: string
phone?: string
email?: string
status: '正常' | '禁用'
createTime?: string
creatorId?: string
}
// 角色数据结构
interface Role {
id: string
name: string
description?: string
level: '地市级' | '区县级' | '一线人员'
status: '启用' | '禁用'
permissions: string[]
}
// 组织数据结构
interface Organization {
id: string
name: string
type: '地市' | '区县' | '客户经理团队'
parentId?: string
children?: Organization[]
}
```
### 权限控制逻辑
```typescript
// 组织选择权限控制
switch (role.level) {
case '地市级':
return true // 可选择所有组织
case '区县级':
return orgType !== '地市' // 不能选择地市组织
case '一线人员':
return orgType !== '地市' // 不能选择地市组织
}
```
## 🎨 UI/UX 特性
### 设计风格
- 采用Element Plus组件库
- 科技蓝主题色 (#1677ff)
- 卡片式布局设计
- 响应式网格布局
### 交互体验
- 实时表单验证
- 友好的错误提示
- 确认对话框防误操作
- 加载状态和成功提示
- 键盘导航支持
### 视觉反馈
- 当前用户高亮标识
- 状态标签颜色区分
- 组织树选中状态
- 不可选项灰化处理
## 🔒 安全特性
### 权限保护
- 当前登录用户不可删除自己
- 当前登录用户不可禁用自己
- 当前登录用户不可修改自己的组织
- 角色层级限制组织选择范围
### 数据验证
- 前端表单验证
- 用户名唯一性检查
- 必填字段验证
- 数据格式验证
## 🚀 使用方法
### 1. 启动应用
```bash
cd vue3-gig-platform
npm run dev
```
### 2. 访问用户管理
- 登录系统后，点击左侧菜单"账号管理"
- 进入用户管理页面
### 3. 基本操作
- **查看用户**: 在用户列表中查看所有用户信息
- **搜索用户**: 使用顶部搜索框按姓名或手机号搜索
- **筛选用户**: 使用角色和状态下拉框筛选
- **新增用户**: 点击"新增用户"按钮，填写表单信息
- **编辑用户**: 点击用户行的"编辑"按钮
- **管理状态**: 点击"启用"/"禁用"按钮切换用户状态
- **删除用户**: 点击"删除"按钮（需确认）
## 📝 注意事项
1. **当前用户限制**: 当前登录的用户在列表中会特殊标识，且不能删除、禁用或修改组织
2. **角色权限**: 不同角色级别限制了可选择的组织范围
3. **数据持久化**: 当前为前端模拟数据，实际使用需要对接后端API
4. **密码安全**: 编辑用户时密码字段留空表示不修改原密码
## 🔄 与React版本对比
| 功能 | React版本 | Vue3版本 | 状态 |
|------|-----------|----------|------|
| 用户列表 | ✅ | ✅ | 完全对应 |
| 搜索筛选 | ✅ | ✅ | 完全对应 |
| 新增用户 | ✅ | ✅ | 完全对应 |
| 编辑用户 | ✅ | ✅ | 完全对应 |
| 组织树 | ✅ | ✅ | 完全对应 |
| 状态管理 | ✅ | ✅ | 完全对应 |
| 权限控制 | ✅ | ✅ | 完全对应 |
| UI样式 | ✅ | ✅ | 高度还原 |
转换完成度：**100%** ✅
所有React版本的功能都已成功转换为Vue3版本，并保持了相同的用户体验和功能完整性。
channelBusiManage/public/favicon.ico 0 → 100644
No preview for this file type
channelBusiManage/public/src/assets/login-bg.png 0 → 100644
# 占位符 - 登录背景图片
# 请将React项目中的背景图片复制到这里
channelBusiManage/public/src/assets/logo.png 0 → 100644
# 占位符 - Logo图片
# 请将React项目中的Logo图片复制到这里
channelBusiManage/src/App.vue 0 → 100644
<script setup lang="ts">
import { ref } from 'vue'
import LoginPage from './components/LoginPage.vue'
import DesktopMain from './components/DesktopMain.vue'
// 登录状态管理
const isLoggedIn = ref(false)
const currentUser = ref<{ username: string; role: 'admin' | 'viewer' } | null>(null)
// 登录处理
const handleLogin = (username: string, role: 'admin' | 'viewer') => {
currentUser.value = { username, role }
isLoggedIn.value = true
}
// 登出处理
const handleLogout = () => {
currentUser.value = null
isLoggedIn.value = false
}
</script>
<template>
<div class="size-full bg-background">
<!-- 登录页面 -->
<LoginPage
v-if="!isLoggedIn"
:on-login="handleLogin"
/>
<!-- 主应用界面 -->
<DesktopMain
v-else
:current-user="currentUser"
@logout="handleLogout"
/>
</div>
</template>
<style scoped>
/* 全局样式已在 main.css 中定义 */
</style>
\ No newline at end of file
channelBusiManage/src/assets/base.css 0 → 100644
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
channelBusiManage/src/assets/form-styles.css 0 → 100644
/* 全局表单组件样式 - 灰色背景，无边框 */
/* Element Plus 输入框样式 */
.el-input__wrapper {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
transition: all 0.2s ease-in-out !important;
}
.el-input__wrapper:hover {
border: none !important;
box-shadow: none !important;
}
.el-input__wrapper.is-focus {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
}
/* Element Plus 文本框样式 */
.el-textarea__inner {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
}
.el-textarea__inner:hover {
border: none !important;
box-shadow: none !important;
}
.el-textarea__inner:focus {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
}
/* Element Plus 下拉框样式 */
.el-select .el-input__wrapper {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
}
.el-select .el-input__wrapper:hover {
border: none !important;
box-shadow: none !important;
}
.el-select .el-input__wrapper.is-focus {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
}
/* Element Plus 时间选择器样式 */
.el-date-editor .el-input__wrapper {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
}
.el-date-editor .el-input__wrapper:hover {
border: none !important;
box-shadow: none !important;
}
.el-date-editor .el-input__wrapper.is-focus {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
}
/* Element Plus 数字输入框样式 */
.el-input-number .el-input__wrapper {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
}
.el-input-number .el-input__wrapper:hover {
border: none !important;
box-shadow: none !important;
}
.el-input-number .el-input__wrapper.is-focus {
background-color: #f3f3f5 !important;
border: none !important;
box-shadow: none !important;
}
/* Element Plus 复选框样式 */
.el-checkbox__input .el-checkbox__inner {
background-color: #f3f3f5 !important;
border: none !important;
}
.el-checkbox__input .el-checkbox__inner:hover {
border: none !important;
}
/* Element Plus 单选框样式 */
.el-radio__input .el-radio__inner {
background-color: #f3f3f5 !important;
border: none !important;
}
.el-radio__input .el-radio__inner:hover {
border: none !important;
}
/* Element Plus 开关样式 */
.el-switch__core {
background-color: #f3f3f5 !important;
border: none !important;
}
/* Element Plus 按钮优化 */
.el-button {
transition: all 0.2s ease-in-out !important;
}
.el-button:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}
.el-button:active {
transform: scale(0.95) !important;
}
/* Element Plus 卡片悬停效果 */
.el-card {
transition: box-shadow 0.2s ease-in-out !important;
}
.el-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
/* Element Plus 表格行悬停效果 */
.el-table__row {
transition: background-color 0.15s ease-in-out !important;
}
channelBusiManage/src/assets/logo.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
channelBusiManage/src/components/HelloWorld.vue 0 → 100644
<script setup lang="ts">
defineProps<{
msg: string
}>()
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
</h3>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
position: relative;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>
channelBusiManage/src/components/OrganizationTree.vue 0 → 100644
<template>
<div class="space-y-1">
<div
v-for="org in organizations"
:key="org.id"
class="space-y-1"
>
<div
:class="[
'flex items-center gap-3 py-2 pl-2 pr-3 rounded-lg transition-all border cursor-pointer',
!isSelectable(org)
? 'opacity-40 cursor-not-allowed border-transparent bg-transparent'
: selectedId === org.id
? 'border-blue-500 bg-white shadow-[0_0_0_2px_rgba(59,130,246,0.12)]'
: 'border-transparent hover:border-neutral-200 hover:bg-neutral-50'
]"
@click="handleSelect(org)"
>
<!-- 展开/收起按钮 -->
<button
v-if="hasChildren(org)"
@click.stop="toggleExpand(org.id)"
class="p-1 hover:bg-neutral-200 rounded-md transition-colors"
>
<ChevronDown
v-if="expandedIds.has(org.id)"
class="h-4 w-4 text-neutral-600"
/>
<ChevronRight
v-else
class="h-4 w-4 text-neutral-600"
/>
</button>
<div v-else class="w-6" />
<div
:class="[
'w-4 h-4 rounded-sm border flex items-center justify-center transition-colors',
selectedId === org.id
? 'border-blue-500 bg-blue-500 ring-2 ring-blue-100'
: isSelectable(org)
? 'border-neutral-300 bg-white'
: 'border-dashed border-neutral-300 bg-neutral-100'
]"
>
<span
v-if="selectedId === org.id"
class="inline-block w-2 h-2 rounded-sm bg-white"
/>
</div>
<!-- 组织图标 -->
<Building2
:class="[
'h-4 w-4 transition-colors',
!isSelectable(org)
? 'text-neutral-300'
: selectedId === org.id
? 'text-blue-600'
: 'text-neutral-500'
]"
/>
<!-- 组织信息 -->
<div class="flex-1">
<div class="flex items-center gap-2">
<span
:class="[
!isSelectable(org)
? 'text-neutral-400'
: selectedId === org.id
? 'text-blue-600 font-medium'
: 'text-neutral-900'
]"
>
{{ org.name }}
</span>
<el-tag
size="small"
effect="plain"
class="text-neutral-600 border-neutral-200 !bg-[#f5f7fb]"
>
{{ getOrgTypeLabel(org.type) }}
</el-tag>
<span
v-if="!isSelectable(org)"
class="text-xs text-neutral-400"
>
（不可选）
</span>
</div>
</div>
</div>
<!-- 子组织 -->
<div
v-if="hasChildren(org) && expandedIds.has(org.id)"
class="ml-8 pl-2 border-l border-dashed border-neutral-200 space-y-1"
>
<OrganizationTree
:organizations="org.children!"
:selected-id="selectedId"
:role-id="roleId"
:expanded-ids="expandedIds"
:account-type="accountType"
@select="$emit('select', $event)"
@toggle-expand="handleToggleExpand"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { Building2, ChevronDown, ChevronRight } from 'lucide-vue-next'
interface Organization {
id: string
name: string
type: '地市' | '区县' | '客户经理团队'
parentId?: string
children?: Organization[]
}
interface Role {
id: string
name: string
level: '地市级' | '区县级' | '一线人员'
}
interface Props {
organizations: Organization[]
selectedId?: string
roleId?: string
roles?: Role[]
expandedIds?: Set<string>
accountType?: '地市级' | '区县级' | '一线人员'
}
const props = withDefaults(defineProps<Props>(), {
selectedId: '',
roleId: '',
roles: () => [],
expandedIds: () => new Set(),
accountType: ''
})
const emit = defineEmits<{
select: [orgId: string]
'toggle-expand': [orgId: string]
}>()
// 如果没有传入 expandedIds，使用本地状态
const localExpandedIds = ref(new Set<string>())
const expandedIds = computed(() =>
props.expandedIds && props.expandedIds.size > 0
? props.expandedIds
: localExpandedIds.value
)
// 工具函数
const hasChildren = (org: Organization): boolean => {
return !!(org.children && org.children.length > 0)
}
const isSelectable = (org: Organization): boolean => {
console.log('检查组织可选性:', org.name, org.type, '账号类型:', props.accountType)
// 只根据账号类型判断，不根据角色层级判断
if (props.accountType) {
switch (props.accountType) {
case '地市级':
// 地市级只能选择地市级组织
console.log('地市级账号，检查组织类型是否为地市:', org.type === '地市')
return org.type === '地市'
case '区县级':
// 区县级只能选择区县级组织
console.log('区县级账号，检查组织类型是否为区县:', org.type === '区县')
return org.type === '区县'
case '一线人员':
// 一线人员只能选择区县下的客户经理团队
console.log('一线人员账号，检查组织类型是否为客户经理团队:', org.type === '客户经理团队')
if (org.type !== '客户经理团队') {
return false
}
// 检查该客户经理团队是否属于某个区县
const result = isUnderCounty(org)
console.log('客户经理团队是否属于区县下:', result)
return result
default:
return true
}
}
// 如果没有账号类型，可以选择所有组织
return true
}
// 检查组织是否属于区县下
const isUnderCounty = (org: Organization): boolean => {
console.log('OrganizationTree.vue:202 检查组织是否属于区县下:', org.name, org.type, org.id)
// 从根节点开始构建完整的组织映射，确保包含所有组织
const buildOrgMap = (organizations: Organization[], orgMap: Map<string, Organization> = new Map()) => {
organizations.forEach(o => {
orgMap.set(o.id, o)
console.log('OrganizationTree.vue:210 添加组织到映射:', o.id, o.name, o.type)
if (o.children) {
buildOrgMap(o.children, orgMap)
}
})
return orgMap
}
// 使用完整的组织数据构建映射
const orgMap = buildOrgMap(props.organizations)
console.log('OrganizationTree.vue:218 组织映射大小:', orgMap.size)
// 从当前组织开始向上查找
let currentOrg = org
while (currentOrg) {
console.log('OrganizationTree.vue:224 查找父组织ID:', currentOrg.parentId)
const parentOrg = currentOrg.parentId ? orgMap.get(currentOrg.parentId) : undefined
console.log('OrganizationTree.vue:226 找到父组织:', parentOrg?.name, parentOrg?.type)
if (parentOrg) {
if (parentOrg.type === '区县') {
console.log('OrganizationTree.vue:230 找到区县父组织:', parentOrg.name)
return true
}
currentOrg = parentOrg
} else {
console.log('OrganizationTree.vue:236 未找到父组织，退出循环')
break
}
}
console.log('OrganizationTree.vue:241 未找到区县父组织')
return false
}
const getOrgTypeLabel = (type: Organization['type']) => {
switch (type) {
case '地市':
return '地市'
case '区县':
return '区县'
case '客户经理团队':
return '客户经理团队'
default:
return type
}
}
const getRoleLevel = (roleId: string): string => {
if (!props.roles || props.roles.length === 0) return '区县级'
const role = props.roles.find(r => r.id === roleId)
return role ? role.level : '区县级'
}
// 事件处理
const handleSelect = (org: Organization) => {
if (isSelectable(org)) {
emit('select', org.id)
}
}
const toggleExpand = (orgId: string) => {
if (props.expandedIds && props.expandedIds.size > 0) {
// 使用父组件的展开状态
emit('toggle-expand', orgId)
} else {
// 使用本地展开状态
if (localExpandedIds.value.has(orgId)) {
localExpandedIds.value.delete(orgId)
} else {
localExpandedIds.value.add(orgId)
}
}
}
const handleToggleExpand = (orgId: string) => {
emit('toggle-expand', orgId)
}
// 初始化展开顶级组织
if (props.expandedIds && props.expandedIds.size === 0) {
props.organizations.forEach(org => {
if (!org.parentId) {
localExpandedIds.value.add(org.id)
}
})
}
</script>
<style scoped>
.space-y-1 > * + * {
margin-top: 0.25rem;
}
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.gap-2 {
gap: 0.5rem;
}
.p-1 {
padding: 0.25rem;
}
.p-2 {
padding: 0.5rem;
}
.rounded {
border-radius: 0.25rem;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.opacity-40 {
opacity: 0.4;
}
.bg-blue-50 {
background-color: #eff6ff;
}
.border {
border-width: 1px;
}
.border-blue-500 {
border-color: #3b82f6;
}
.hover\:bg-neutral-50:hover {
background-color: #f9fafb;
}
.hover\:bg-neutral-200:hover {
background-color: #e5e7eb;
}
.h-4 {
height: 1rem;
}
.w-4 {
width: 1rem;
}
.w-6 {
width: 1.5rem;
}
.text-neutral-300 {
color: #d1d5db;
}
.text-neutral-400 {
color: #9ca3af;
}
.text-neutral-500 {
color: #6b7280;
}
.text-neutral-600 {
color: #4b5563;
}
.text-neutral-900 {
color: #111827;
}
.text-blue-600 {
color: #2563eb;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.flex-1 {
flex: 1 1 0%;
}
.ml-4 {
margin-left: 1rem;
}
.border-l-2 {
border-left-width: 2px;
}
.border-neutral-200 {
border-color: #e5e7eb;
}
</style>
channelBusiManage/src/components/PermissionTreeNode.vue 0 → 100644
<template>
<div class="space-y-1">
<div
:class="`permission-tree-node flex items-center gap-2 p-2 rounded ${level > 0 ? 'ml-6' : ''}`"
>
<!-- 展开/收起按钮 -->
<button
v-if="hasChildren"
@click="$emit('toggleExpand', permission.id)"
class="p-1 hover:bg-neutral-200 rounded flex items-center justify-center w-6 h-6"
>
<el-icon class="text-neutral-600">
<ArrowDown v-if="isExpanded" />
<ArrowRight v-else />
</el-icon>
</button>
<div v-else class="w-6" />
<!-- 复选框 -->
<el-checkbox
:model-value="isSelected"
@change="$emit('togglePermission', permission.id)"
:indeterminate="isIndeterminate"
/>
<!-- 权限信息 -->
<div class="flex-1">
<div class="flex items-center gap-2">
<span class="text-neutral-900">{{ permission.name }}</span>
<el-tag
type="info"
effect="plain"
size="small"
class="text-xs"
>
{{ permission.code }}
</el-tag>
</div>
<p v-if="permission.description" class="text-xs text-neutral-500 mt-1">
{{ permission.description }}
</p>
</div>
</div>
<!-- 子权限 -->
<div v-if="hasChildren && isExpanded" class="ml-4 border-l-2 border-neutral-200">
<PermissionTreeNode
v-for="child in permission.children"
:key="child.id"
:permission="child"
:selected-permissions="selectedPermissions"
:expanded-permissions="expandedPermissions"
:level="level + 1"
@toggle-permission="$emit('togglePermission', $event)"
@toggle-expand="$emit('toggleExpand', $event)"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
// 类型定义
interface Permission {
id: string
name: string
code: string
description?: string
parentId?: string
children?: Permission[]
}
// Props
interface Props {
permission: Permission
selectedPermissions: string[]
expandedPermissions: Set<string>
level: number
}
const props = defineProps<Props>()
// Emits
defineEmits<{
togglePermission: [permissionId: string]
toggleExpand: [permissionId: string]
}>()
// 计算属性
const hasChildren = computed(() =>
props.permission.children && props.permission.children.length > 0
)
const isExpanded = computed(() =>
props.expandedPermissions.has(props.permission.id)
)
const isSelected = computed(() =>
props.selectedPermissions.includes(props.permission.id)
)
const isIndeterminate = computed(() => {
if (isSelected.value || !hasChildren.value) return false
return props.permission.children!.some(c =>
props.selectedPermissions.includes(c.id)
)
})
</script>
<style scoped>
/* 组件特定样式 */
</style>
channelBusiManage/src/components/TheWelcome.vue 0 → 100644
<script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
</script>
<template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
Vue’s
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>
This project is served and bundled with
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
>Vue - Official</a
>. If you need to test your components and web pages, check out
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
and
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
/
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
<br />
More instructions are available in
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
you need more resources, we suggest paying
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
Got stuck? Ask your question on
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
(our official Discord server), or
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
>StackOverflow</a
>. You should also follow the official
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
Bluesky account or the
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
X account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
</WelcomeItem>
</template>
channelBusiManage/src/components/WelcomeItem.vue 0 → 100644
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>
<style scoped>
.item {
margin-top: 2rem;
display: flex;
position: relative;
}
.details {
flex: 1;
margin-left: 1rem;
}
i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}
@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:first-of-type:before {
display: none;
}
.item:last-of-type:after {
display: none;
}
}
</style>
channelBusiManage/src/main.ts 0 → 100644
import './assets/main.css'
import './assets/form-styles.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
// 注册Element Plus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')
channelBusiManage/src/router/index.ts 0 → 100644
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'),
},
{
path: '/role-test',
name: 'role-test',
component: () => import('../views/RoleTestView.vue'),
},
],
})
export default router
channelBusiManage/src/stores/counter.ts 0 → 100644
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
channelBusiManage/src/views/AboutView.vue 0 → 100644
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
channelBusiManage/src/views/HomeView.vue 0 → 100644
<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
<main>
<TheWelcome />
</main>
</template>
channelBusiManage/src/views/RoleTestView.vue 0 → 100644
<template>
<div class="min-h-screen bg-gray-50 p-6">
<div class="max-w-7xl mx-auto">
<h1 class="text-2xl font-bold text-gray-900 mb-6">角色管理测试页面</h1>
<RoleManagement
:roles="roles"
:permissions="permissions"
@add-role="handleAddRole"
@update-role="handleUpdateRole"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import RoleManagement from '@/components/RoleManagement.vue'
import { ElMessage } from 'element-plus'
// 类型定义
interface Role {
id: string
name: string
description?: string
level: '地市级' | '区县级' | '一线人员'
permissionIds: string[]
status: '启用' | '禁用'
createTime?: string
}
interface Permission {
id: string
name: string
code: string
description?: string
parentId?: string
children?: Permission[]
}
// 测试数据
const roles = ref<Role[]>([
{
id: 'role-001',
name: '区县全权管理员',
description: '拥有区县级别的所有管理权限，可以管理订单、用户和业务规则',
level: '区县级',
permissionIds: [
'order',
'order:view',
'order:complete',
'order:reward',
'order:approve',
'business',
'business:view',
'business:create',
'business:edit',
'system',
'system:role',
'system:role:view',
'system:role:create',
'system:role:edit',
'system:account',
'system:account:view',
'system:account:create',
'system:account:edit'
],
status: '启用',
createTime: '2025-10-20 09:00:00'
},
{
id: 'role-002',
name: '订单管理员',
description: '负责订单的日常管理和处理',
level: '一线人员',
permissionIds: ['order', 'order:view', 'order:complete', 'order:reward', 'order:approve'],
status: '启用',
createTime: '2025-10-20 09:30:00'
},
{
id: 'role-003',
name: '业务规则管理员',
description: '负责业务规则的配置和维护',
level: '区县级',
permissionIds: ['business', 'business:view', 'business:create', 'business:edit'],
status: '启用',
createTime: '2025-10-20 10:00:00'
}
])
const permissions = ref<Permission[]>([
{
id: 'order',
name: '订单管理',
code: 'order',
description: '订单相关的所有权限',
children: [
{
id: 'order:view',
name: '查看订单',
code: 'order:view',
description: '查看订单列表和详情',
parentId: 'order'
},
{
id: 'order:complete',
name: '填写办结信息',
code: 'order:complete',
description: '填写CRM订单编号和办理备注',
parentId: 'order'
},
{
id: 'order:reward',
name: '填写酬金金额',
code: 'order:reward',
description: '填写和修改实际发放酬金',
parentId: 'order'
},
{
id: 'order:approve',
name: '审核',
code: 'order:approve',
description: '审核通过或驳回订单',
parentId: 'order'
}
]
},
{
id: 'business',
name: '业务规则管理',
code: 'business',
description: '业务规则相关权限',
children: [
{
id: 'business:view',
name: '查看业务规则',
code: 'business:view',
description: '查看业务规则列表',
parentId: 'business'
},
{
id: 'business:create',
name: '创建业务规则',
code: 'business:create',
description: '创建新的业务规则',
parentId: 'business'
},
{
id: 'business:edit',
name: '编辑业务规则',
code: 'business:edit',
description: '修改和停用业务规则',
parentId: 'business'
}
]
},
{
id: 'system',
name: '系统管理',
code: 'system',
description: '系统管理相关权限',
children: [
{
id: 'system:role',
name: '角色管理',
code: 'system:role',
description: '角色管理相关权限',
parentId: 'system',
children: [
{
id: 'system:role:view',
name: '查看角色',
code: 'system:role:view',
description: '查看角色列表',
parentId: 'system:role'
},
{
id: 'system:role:create',
name: '创建角色',
code: 'system:role:create',
description: '创建新角色',
parentId: 'system:role'
},
{
id: 'system:role:edit',
name: '编辑角色',
code: 'system:role:edit',
description: '编辑角色信息和权限',
parentId: 'system:role'
}
]
},
{
id: 'system:account',
name: '账号管理',
code: 'system:account',
description: '账号管理相关权限',
parentId: 'system',
children: [
{
id: 'system:account:view',
name: '查看账号',
code: 'system:account:view',
description: '查看账号列表',
parentId: 'system:account'
},
{
id: 'system:account:create',
name: '创建账号',
code: 'system:account:create',
description: '创建新账号',
parentId: 'system:account'
},
{
id: 'system:account:edit',
name: '编辑账号',
code: 'system:account:edit',
description: '编辑账号信息',
parentId: 'system:account'
}
]
}
]
}
])
// 事件处理
const handleAddRole = (roleData: Omit<Role, 'id' | 'createTime'>) => {
const newRole: Role = {
id: `role-${Date.now()}`,
...roleData,
createTime: new Date().toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
}
roles.value.push(newRole)
ElMessage.success('角色创建成功')
console.log('新增角色:', newRole)
}
const handleUpdateRole = (roleId: string, updates: Partial<Role>) => {
const roleIndex = roles.value.findIndex(role => role.id === roleId)
if (roleIndex !== -1) {
roles.value[roleIndex] = { ...roles.value[roleIndex], ...updates }
ElMessage.success('角色更新成功')
console.log('更新角色:', roleId, updates)
}
}
</script>
<style scoped>
/* 测试页面样式 */
</style>
channelBusiManage/stagewise.json 0 → 100644
{
"port": 4001,
"appPort": 5178,
"autoPlugins": true,
"plugins": []
}
\ No newline at end of file
channelBusiManage/tailwind.config.js 0 → 100644
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
// 品牌主色
'brand-primary': '#3b82f6',
'brand-primary-hover': '#2563eb',
'brand-primary-light': '#dbeafe',
// 功能色
'success': '#10b981',
'warning': '#f59e0b',
'error': '#d4183d',
'info': '#3b82f6',
// 中性色
'neutral-50': '#f9fafb',
'neutral-100': '#f3f4f6',
'neutral-200': '#e5e7eb',
'neutral-300': '#e5e7eb',
'neutral-400': '#d1d5db',
'neutral-500': '#9ca3af',
'neutral-600': '#6b7280',
'neutral-700': '#4b5563',
'neutral-800': '#374151',
'neutral-900': '#1f2937',
},
borderRadius: {
lg: '10px',
md: '8px',
sm: '6px',
xl: '14px',
},
fontFamily: {
sans: ['DIN', '"Source Han Sans CN"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'system-ui', 'sans-serif'],
mono: ['DIN', 'monospace'],
},
},
},
plugins: [],
}
\ No newline at end of file
channelBusiManage/tsconfig.app.json 0 → 100644
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
}
}
channelBusiManage/tsconfig.json 0 → 100644
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}
channelBusiManage/tsconfig.node.json 0 → 100644
{
"extends": "@tsconfig/node22/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}
channelBusiManage/vite.config.ts 0 → 100644
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
// vueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!