jufubao-third 1.0.19-beta1 → 1.0.19-beta2

package/docs/modules/router-guide.md

@@ -0,0 +1,288 @@
+# 路由配置规范
+
+> 本文档定义项目路由配置规范，为智能体协同开发提供统一参考。
+
+---
+
+## 一、文件结构
+
+```
+src/router/
+├── index.js                # 主入口文件
+├── constantRoutes.js       # 常量路由（无需权限）
+└── modules/                # 权限路由模块
+    ├── user.js             # 用户管理路由
+    ├── order.js            # 订单管理路由
+    └── ...                 # 其他模块
+```
+
+---
+
+## 二、路由类型
+
+### 2.1 常量路由
+
+**文件路径**：`/src/router/constantRoutes.js`
+
+无需权限验证的路由，如登录页、404页面等。
+
+```javascript
+/**
+ * 常量路由 - 无需权限验证
+ */
+export const constantRoutes = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/index'),
+    hidden: true,
+    meta: { title: '登录' }
+  },
+  {
+    path: '/404',
+    name: '404',
+    component: () => import('@/views/404'),
+    hidden: true,
+    meta: { title: '404' }
+  }
+]
+```
+
+---
+
+### 2.2 权限路由
+
+**文件路径**：`/src/router/modules/[模块名].js`
+
+需要权限验证的路由，存放在 modules 目录下自动加载。
+
+```javascript
+/**
+ * [模块名称]路由配置
+ */
+
+/** 路由路径前缀 */
+const basePath = '/module'
+
+/**
+ * [模块名称]路由
+ */
+export default [
+  {
+    path: `${basePath}/list`,
+    name: 'ModuleList',
+    component: () => import('@/views/module/list'),
+    meta: {
+      title: '列表页',
+      icon: 'list'
+    }
+  },
+  {
+    path: `${basePath}/detail`,
+    name: 'ModuleDetail',
+    component: () => import('@/views/module/detail'),
+    meta: {
+      title: '详情页',
+      icon: 'detail'
+    },
+    hidden: true
+  }
+]
+```
+
+---
+
+## 三、路由配置说明
+
+### 3.1 配置字段
+
+| 字段名 | 类型 | 必填 | 说明 |
+|-------|------|------|------|
+| path | String | 是 | 路由路径 |
+| name | String | 是 | 路由名称（用于 keep-alive） |
+| component | Function | 是 | 组件，使用动态导入 |
+| redirect | String | 否 | 重定向路径 |
+| meta | Object | 是 | 路由元信息 |
+| hidden | Boolean | 否 | 是否隐藏菜单 |
+| children | Array | 否 | 子路由 |
+
+---
+
+### 3.2 Meta 字段
+
+| 字段名 | 类型 | 必填 | 说明 |
+|-------|------|------|------|
+| title | String | 是 | 页面标题（显示在侧边栏） |
+| icon | String | 是 | 图标名称 |
+| roles | Array | 否 | 权限角色 |
+| noCache | Boolean | 否 | 是否禁用缓存 |
+| breadcrumb | Boolean | 否 | 是否显示面包屑 |
+| activeMenu | String | 否 | 高亮菜单路径 |
+
+---
+
+## 四、路由示例
+
+### 4.1 列表页路由
+
+```javascript
+{
+  path: '/user/list',
+  name: 'UserList',
+  component: () => import('@/views/user/list'),
+  meta: {
+    title: '用户列表',
+    icon: 'user'
+  }
+}
+```
+
+---
+
+### 4.2 详情页路由
+
+```javascript
+{
+  path: '/user/detail/:id',
+  name: 'UserDetail',
+  component: () => import('@/views/user/detail'),
+  meta: {
+    title: '用户详情',
+    icon: 'user'
+  },
+  hidden: true
+}
+```
+
+---
+
+### 4.3 嵌套路由
+
+```javascript
+{
+  path: '/system',
+  name: 'System',
+  redirect: '/system/user',
+  meta: {
+    title: '系统管理',
+    icon: 'system'
+  },
+  children: [
+    {
+      path: 'user',
+      name: 'SystemUser',
+      component: () => import('@/views/system/user'),
+      meta: {
+        title: '用户管理',
+        icon: 'user'
+      }
+    },
+    {
+      path: 'role',
+      name: 'SystemRole',
+      component: () => import('@/views/system/role'),
+      meta: {
+        title: '角色管理',
+        icon: 'role'
+      }
+    }
+  ]
+}
+```
+
+---
+
+## 五、路由跳转
+
+### 5.1 编程式导航
+
+```javascript
+// 路径跳转
+this.$router.push('/user/list')
+
+// 命名路由跳转
+this.$router.push({ name: 'UserList' })
+
+// 带参数跳转
+this.$router.push({
+  name: 'UserDetail',
+  params: { id: 1 }
+})
+
+// 带查询参数跳转
+this.$router.push({
+  path: '/user/list',
+  query: { keyword: 'test' }
+})
+```
+
+---
+
+### 5.2 路由返回
+
+```javascript
+// 返回上一页
+this.$router.go(-1)
+
+// 返回指定页
+this.$router.go(-2)
+
+// 替换当前路由
+this.$router.replace('/login')
+```
+
+---
+
+## 六、路由守卫
+
+### 6.1 全局前置守卫
+
+**文件路径**：`/src/permission.js`
+
+```javascript
+router.beforeEach(async(to, from, next) => {
+  // 获取 token
+  const hasToken = getToken()
+
+  if (hasToken) {
+    if (to.path === '/login') {
+      next({ path: '/' })
+    } else {
+      // 验证权限
+      const hasRoles = store.getters.roles && store.getters.roles.length > 0
+      if (hasRoles) {
+        next()
+      } else {
+        // 获取用户信息
+        const { roles } = await store.dispatch('user/getInfo')
+        // 生成可访问路由
+        const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+        // 动态添加路由
+        router.addRoutes(accessRoutes)
+        next({ ...to, replace: true })
+      }
+    }
+  } else {
+    // 无 token，跳转登录
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      next(`/login?redirect=${to.path}`)
+    }
+  }
+})
+```
+
+---
+
+## 七、注意事项
+
+1. **路由 name 必须唯一**：用于 keep-alive 缓存
+2. **动态导入组件**：`() => import()` 实现懒加载
+3. **meta 必须包含 title 和 icon**：用于侧边栏显示
+4. **详情页设置 hidden: true**：不在菜单中显示
+5. **路由路径使用小写**：遵循 kebab-case 规范
+
+---
+
+> **待完善**：需要根据实际项目补充具体路由配置

package/docs/modules/template/selector/XdIconSelect.vue

@@ -0,0 +1,331 @@
+<template>
+	<div class="xd-icon-select">
+    <div class="cur_icon" @click="handleToChoseIcon">
+      <xd-font-icon v-if="curIcon" :icon="curIcon" :size="28"></xd-font-icon>
+      <span v-else style="font-size: 12px;color: #666;">选择图标</span>
+    </div>
+    <xd-dialog
+      title="选择图标"
+      width="850px"
+      :show.sync="iconShow"
+      v-if="iconShow"
+      @onClose="handleClear"
+    >
+      <div class="iconFont">
+        <div class="iconFont-search">
+          <el-input
+            placeholder="请输入内容"
+            v-model="searchVal"
+            @input="handleSearch"
+            @clear="handleClearSearch"
+          >
+          </el-input>
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </div>
+        <div class="iconFont-item">
+          <table class="iconFont-table" style="border-collapse: collapse; width: 100%">
+            <tr v-for="(items,index) in tableList" :key="index">
+              <td
+                align="center"
+                :style="`background:${item.value === tempSelected ? 'rgba(255,0,0,.1)':''}; width:${100/items.length}%`"
+                v-for="item in items"
+                :key="item.value"
+                @click="handleTableItem(item)"
+              >
+                <div class="iconFont-item-icon"><i :style="`color:${item.value === tempSelected ? 'red':'#666'};`" :class='`iconfont ${item.value}`'></i></div>
+                <div class="iconFont-item-text" :style="`color:${item.value === tempSelected ? 'red':'#666'};`">{{item.label|nameFilter}}</div>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <template slot="btn">
+        <el-button :size="size" @click="handleClear">取 消</el-button>
+        <el-button :size="size" type="primary" @click="handleConfirm">确 定</el-button>
+      </template>
+    </xd-dialog>
+	</div>
+</template>
+
+<script>
+  import emitter from 'element-ui/src/mixins/emitter';
+  import XdDialog from "@/components/XdDialog.vue";
+  import XdFontIcon from "@/components/XdFontIcon.vue";
+  export default {
+    name: "XdIconSelect",
+    mixins: [emitter],
+    components: {
+      XdDialog,
+      XdFontIcon
+    },
+		props:{
+      defaultValue: {
+        type: String,
+        default: '',
+      },
+
+      maps: {
+        type: Object | null,
+        default() {
+          return null
+        },
+      },
+
+      setting: {
+        type: Object,
+        default() {
+          return {
+            // fullUnit: '元',
+            // cutUnit: '元',
+            // fullName: '金额满',
+            // cutName: '运费减'
+						//todo 插件配置表（外面传入）
+					}
+        },
+      },
+
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+
+      size: {
+        type: String,
+        default: 'medium', //medium / small / mini
+      },
+
+      placeholder: {
+        type: Object,
+        default() {
+          return {
+            //todo
+            // fullPlaceholder: '请输入金额',
+            // cutPlaceholder: '请输入金额',
+            //todo 插件文本框所使用提示（外面传入）
+          }
+        },
+      },
+
+      required: {
+        type: Boolean,
+        default: false,
+      },
+
+      //是否启用自定义校验器
+      useCustomRules: {
+        type: Boolean,
+        default: false,
+      },
+
+      //数字字符串 转 数字
+      isNumber: {
+        type: Boolean,
+        default: true,
+      },
+      list: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+
+      //自定义方法
+      handleCustom: {
+        type: Function || null,
+        default: null
+      },
+
+		},
+		data(){
+      return {
+        //icon
+        searchVal:'',//搜索词
+        iconInput:true,
+        iconList:[], //原生数据
+        iconType:'icon', //icon image
+        iconShow: false,
+        tableList:[], //渲染数据
+        tempSelected:'',
+        curIcon: '',
+        actIcon:{
+          '--icon-act-setting-color': 'red',
+          '--icon-setting-color': '#333',
+        },
+			}
+		},
+		filters:{
+      nameFilter(str){
+        if(str.length > 5) return str.substring(0,10) + '...'
+        return str;
+      }
+    },
+		created(){
+      //设置默认值为空时候处理
+      if (this.defaultValue === null || this.defaultValue.length === 0) {
+				//todo 初始化插件所使用到绑定值
+      }
+      //非空处理
+      else {
+        this.handleMapToList();
+      }
+      if(this.list && this.list.length > 0) {
+        this.iconInput = false;
+        this.iconList = this.$xdHelper.cloneDeep(this.list);
+        this.initIcon();
+      }
+      //绑定数据
+      this.update();
+		},
+
+		methods: {
+      handleToChoseIcon(){
+        this.iconShow = true;
+        this.tempSelected = this.curIcon;
+      },
+      handleConfirm(){
+        console.log(this.tempSelected);
+        this.iconShow = false;
+        this.curIcon = this.tempSelected;
+        this.searchVal = '';
+        this.tempSelected = '';
+        this.update();
+      },
+      handleTableItem(item) {
+        this.tempSelected = item.value;
+      },
+      handleClearSearch(){
+        this.handleSearch();
+      },
+      handleClear(){
+        this.tempSelected = '';
+        this.iconShow = false;
+      },
+      handleSearch(){
+        this.initIcon();
+      },
+      initIcon(){
+        let cell = 6;
+        let tempArray = [];
+        let len = Math.ceil(this.iconList.length/cell);
+        let orgIcons = this.$xdHelper.cloneDeep(this.iconList);
+        if(this.searchVal) {
+          orgIcons = orgIcons.filter(item=>{
+            return item.label.indexOf(this.searchVal) !== -1 || item.value.indexOf(this.searchVal) !== -1
+          })
+        }
+        for(let i=0; i < len; i++) {
+          tempArray.push(orgIcons.splice(0,cell));
+        }
+        this.tableList = tempArray;
+      },
+      /**
+       * @description 返回映射关系对象数据（需要自己实现）
+			 * 把内部数据转化为返回数据格式
+       */
+      handleListToMap() {
+        //todo 返回绑定值
+        return this.curIcon;
+      },
+
+      /**
+       * @description 初始化映射关系到数据列表(需要自己实现)
+			 * 把默认数据转化为内部数据
+       */
+      handleMapToList() {
+        //todo 把传入中转化绑定值列表
+        this.tempSelected = this.defaultValue;
+        this.curIcon = this.defaultValue;
+      },
+
+      /**
+			 * @description 需要校验检查参数是正确处理方法
+       */
+			checkParams(){
+        if (!this.required) return this.handleListToMap();
+        //校验成功
+        return this.handleListToMap();
+			},
+
+			/**
+			 * @description 数据改变事件
+			 */
+			change(){
+			  this.$emit('onChange', this.checkParams())
+			},
+
+
+      /**
+			 * @description 双向绑定数据处理
+       */
+			update(){
+        this.$emit('input', this.checkParams());
+        if (this.$parent.$options['componentName'] === 'ElFormItem') {
+          this.dispatch('ElFormItem', 'el.form.change', [this.checkParams()]);
+          this.dispatch('ElFormItem', 'el.form.blur', [this.checkParams()])
+        }
+			},
+		}
+  }
+</script>
+
+<style scoped lang="scss">
+	.xd-icon-select {
+    .cur_icon{
+      width: 60px;
+      height: 60px;
+      border: 1px solid #ddd;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+	}
+  .iconFont {
+
+    &-search {
+      margin-bottom: 10px;
+      width: 50%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      & > *:first-child {
+        margin-right: 10px;
+      }
+    }
+
+    &-item {
+      height: 500px;
+      overflow-y: auto;
+      &-icon {
+        margin-top: 20px;
+        & i {
+          font-size:25px;
+          color: #666;
+        }
+
+      }
+      &-text {
+        color: #999;
+        font-size: 12px;
+        margin-top: 10px;
+        margin-bottom: 20px;
+      }
+    }
+
+    &-table{
+      table-layout: fixed;
+      border:1px solid #eee;
+
+      & td, & th {
+        cursor: pointer;
+        border: 1px solid #eee;
+      }
+    }
+  }
+
+	@media screen and (max-width: 768px) {
+		.xd-icon-select {
+		}
+	}
+</style>