fix: 1111

.eslintignore

@@ -5,4 +5,5 @@
 public
 dist
 .umi
-mock
+mock
+windi.config.ts

.stylelintrc.js

@@ -1,9 +1,9 @@
-const fabric = require('@umijs/fabric');
+const fabric = require('@umijs/fabric')
 
 module.exports = {
   ...fabric.stylelint,
   rules: {
-    'indentation': 2,
+    indentation: 2,
     'block-no-empty': null,
     'color-no-invalid-hex': true,
     'declaration-colon-space-after': 'always',
@@ -12,8 +12,7 @@ module.exports = {
     'unit-no-unknown': null,
     'unit-whitelist': ['px', 'em', 'rem', 's', '%', 'vw', 'vh', 'deg'],
     'selector-max-compound-selectors': 5,
-    'color-hex-length': 'long',
     'at-rule-no-unknown': null,
-    'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }],
+    'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }]
   }
-};
+}

src/global.less

@@ -56,21 +56,21 @@ ol {
   }
 }
 
-.leftTitle{
+.leftTitle {
   height: 89.8vh;
 }
-.titleBorder{
+.titleBorder {
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 }
-.leftLihover{
+.leftLihover {
+  color: #fff;
   background: #886ab5;
-  color:#fff;
 }
-.popoverList li{
-  padding: 5px;
+.popoverList li {
   display: block;
+  padding: 5px;
   cursor: pointer;
 }
-.popoverList li:hover{
+.popoverList li:hover {
   color: #886ab5;
-}
+}

src/pages/Role/Customer/index.tsx

@@ -1,12 +1,12 @@
-import { Card } from 'antd'
 import React from 'react'
+import RoleMenu from '../System/components/roleMenu'
 
-const index = () => {
+const Customer = () => {
   return (
-    <div>
-      <Card>客户管理</Card>
+    <div className="h-full w-full">
+      <RoleMenu menuId={'123'} />
     </div>
   )
 }
 
-export default index
+export default Customer

src/pages/Role/System/components/index.less

@@ -0,0 +1,7 @@
+.roleMenu {
+  box-shadow: rgba(74, 53, 107, 0.08) 0 0 13px 0;
+
+  .active {
+    @apply text-white bg-primary rounded-4px;
+  }
+}

src/pages/Role/System/components/roleMenu.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { PlusOutlined, DownOutlined } from '@ant-design/icons'
+import { Button, Popover } from 'antd'
+import './index.less'
+
+type RoleMenuProps = {
+  menuId: string
+  onSelect?: (id: string) => void
+}
+
+const RoleMenu: React.FC<RoleMenuProps> = () => {
+  // const [activeId, setActiveId] = useState('')
+  const content = (
+    <div className="popoverList">
+      <ul>
+        <li>复制</li>
+        <li>粘贴</li>
+        <li className="text-red-500">删除</li>
+      </ul>
+    </div>
+  )
+
+  return (
+    <div className="h-full w-max-234px rounded-4px roleMenu">
+      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
+        <span className="text-[0.9375rem]">角色列表</span>
+        <Button size="small" type="primary" ghost>
+          <PlusOutlined />
+          创建角色
+        </Button>
+      </div>
+      <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
+        <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
+          <li
+            className="flex justify-between items-center  py-2 px-5"
+            onClick={() => setActiveId('1')}>
+            <span>客户管理员</span>
+            <Popover placement="bottomRight" content={content} trigger="click">
+              <DownOutlined />
+            </Popover>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default RoleMenu

src/pages/Role/System/index.tsx

@@ -54,14 +54,12 @@ const index = () => {
       <Row>
         <Col flex="260px">
           <div className="leftTitle bg-white rounded">
-            <h2 className="titleBorder bg-[#f7f9fa] p-4">
-              角色列表{' '}
-              <span className="float-right">
-                <Button size="small" type="primary" ghost>
-                  <PlusOutlined />
-                  创建角色
-                </Button>
-              </span>
+            <h2 className="titleBorder bg-[#f7f9fa] p-4 flex justify-between items-center">
+              <span>角色列表</span>
+              <Button size="small" type="primary" ghost>
+                <PlusOutlined />
+                创建角色
+              </Button>
             </h2>
             <div className="p-4">
               <List
@@ -87,12 +85,7 @@ const index = () => {
                 <Table dataSource={dataSource} columns={columns} />
               </TabPane>
               <TabPane tab="角色权限" key="2">
-                <ProForm
-                  layout="horizontal"
-                  onFinish={values => {
-                    console.log(values)
-                  }}
-                  initialValues={{ staff: ['1', '2'] }}>
+                <ProForm layout="horizontal" initialValues={{ staff: ['1', '2'] }}>
                   <ProFormSwitch
                     name="showHome"
                     label={

tsconfig.json

@@ -34,6 +34,7 @@
     ".eslintrc.js",
     ".stylelintrc.js",
     ".prettierrc.js",
+    "windi.config.ts",
     "jest.config.js",
     "mock/*"
   ],

windi.config.ts

@@ -19,6 +19,9 @@ export default defineConfig({
         lg: '992px',
         xl: '1200px',
         '2xl': '1600px'
+      },
+      boxShadow: {
+        card: '0px 0px 13px 0px rgba(74, 53,107, 0.08)'
       }
     }
   }