@fe-free/core 2.8.15 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @fe-free/core
 
+## 3.0.1
+
+### Patch Changes
+
+- feat: theme
+  - @fe-free/tool@3.0.1
+
+## 3.0.0
+
+### Major Changes
+
+- feat: theme
+
+### Patch Changes
+
+- @fe-free/tool@3.0.0
+
 ## 2.8.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.8.15",
+  "version": "3.0.1",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.8.15"
+    "@fe-free/tool": "3.0.1"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/crud/crud.tsx

@@ -118,7 +118,7 @@ function CRUDComponent<
             const disabled = readProps?.operateIsDisabled?.(record) || false;
             if (disabled) {
               btns.push(
-                <span key="read" className="cursor-not-allowed text-desc">
+                <span key="read" className="cursor-not-allowed text-03">
                   {readProps?.operateText || '查看'}
                 </span>,
               );
@@ -144,7 +144,7 @@ function CRUDComponent<
             const disabled = readProps?.operateIsDisabled?.(record) || false;
             if (disabled) {
               btns.push(
-                <span key="read" className="cursor-not-allowed text-desc">
+                <span key="read" className="cursor-not-allowed text-03">
                   {readProps?.operateText || '查看'}
                 </span>,
               );
@@ -169,7 +169,7 @@ function CRUDComponent<
 
             if (disabled) {
               btns.push(
-                <span key="update" className="cursor-not-allowed text-desc">
+                <span key="update" className="cursor-not-allowed text-03">
                   {updateProps?.operateText || '编辑'}
                 </span>,
               );

package/src/crud/crud_delete.tsx

@@ -39,7 +39,7 @@ function OperateDelete(props: Params) {
   const { doDelete } = useDelete({ name, desc, onDelete, operateText });
 
   if (disabled) {
-    return <span className="text-desc cursor-not-allowed">{operateText || '删除'}</span>;
+    return <span className="cursor-not-allowed text-03">{operateText || '删除'}</span>;
   }
 
   return (

package/src/crud_of_list/crud_of_list.stories.tsx

@@ -22,7 +22,7 @@ CRUDOfList 组件。（简洁的列表形态的 CRUD 组件）
   decorators: [
     (Story) => {
       return (
-        <div className="fec-border h-[500px] w-[300px] overflow-y-auto">
+        <div className="h-[500px] w-[300px] overflow-y-auto border border-01">
           <Story />
         </div>
       );

package/src/editor_mention/index.tsx

@@ -110,10 +110,10 @@ function useDropdown({ items, renderItem, onSelect, editorRef }) {
         left: `${position.left}px`,
       }}
     >
-      {items.length === 0 && <div className="p-2 text-sm text-desc">暂无数据</div>}
+      {items.length === 0 && <div className="p-2 text-sm text-03">暂无数据</div>}
       {items.map((group, i) => (
         <div key={group.label}>
-          <div className="p-2 text-sm text-desc">{group.label}</div>
+          <div className="p-2 text-sm text-03">{group.label}</div>
           <div>
             {group.options.map((item) => (
               <div
@@ -332,7 +332,7 @@ const EditorMention = ({
         onInput={handleInput}
         onKeyDown={handleKeyDown}
         className={classNames(
-          'fec-border w-full flex-1 overflow-y-auto rounded p-2 outline-none focus:border-primary',
+          'w-full flex-1 overflow-y-auto rounded border border-01 p-2 outline-none focus:border-primary',
           resizeHeight && 'resize-y',
         )}
         style={{

package/src/file/index.tsx

@@ -57,7 +57,7 @@ function FileCard({
       <FileIcon name={name} className="text-4xl" />
       <div className={classNames('flex flex-col', { 'items-center': direction === 'vertical' })}>
         {name && <div className="truncate">{name}</div>}
-        {size && <div className="text-sm text-desc">{getFileSize(size)}</div>}
+        {size && <div className="text-sm text-03">{getFileSize(size)}</div>}
       </div>
     </div>
   );

package/src/index.ts

@@ -57,6 +57,7 @@ export { Table } from './table';
 export type { TableProps } from './table';
 export { Tabs } from './tabs';
 export type { TabsProps } from './tabs';
+export { themeVariables } from './theme';
 export { FileTree, Tree, flatToTreeData } from './tree';
 export type { FileTreeProps, TreeProps } from './tree';
 export { useLocalforageState } from './use_localforage_state';

package/src/infinite_list/index.tsx

@@ -103,8 +103,8 @@ const InfiniteListBase = <D, P>({
         </div>
       )}
       <div className="flex w-full items-center justify-center">
-        {noMore && <div className="my-5 text-center text-desc">没有更多数据</div>}
-        {loadingMore && <div className="my-5 text-center text-desc">加载更多数据中...</div>}
+        {noMore && <div className="my-5 text-center text-03">没有更多数据</div>}
+        {loadingMore && <div className="my-5 text-center text-03">加载更多数据中...</div>}
       </div>
     </div>
   );

package/src/record/index.tsx

@@ -85,7 +85,7 @@ function RecordArray(props: RecordArrayProps) {
 
   return (
     <ProFormListHelper
-      className={classNames('fec-bg rounded p-2', className)}
+      className={classNames('rounded bg-005 p-2', className)}
       value={value}
       onChange={onChange}
       getAdd={() => ({

package/src/style.scss

@@ -12,35 +12,3 @@
 
 /* stylelint-disable-next-line at-rule-no-unknown */
 @tailwind utilities;
-
-.fec-border {
-  border: 1px solid #f0f0f0;
-}
-
-.fec-border-bottom {
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.fec-border-top {
-  border-top: 1px solid #f0f0f0;
-}
-
-.fec-border-left {
-  border-left: 1px solid #f0f0f0;
-}
-
-.fec-border-right {
-  border-right: 1px solid #f0f0f0;
-}
-
-.fec-bg {
-  background-color: #f3f5f6;
-}
-
-.fec-bg-hover {
-  background-color: #f3f5f6;
-
-  &:hover {
-    background-color: #e9ebec;
-  }
-}

package/src/tailwind.config.ts

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+import { themeVariables } from './theme';
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: themeVariables.color,
+      textColor: themeVariables.textColor,
+      borderColor: themeVariables.borderColor,
+      backgroundColor: themeVariables.backgroundColor,
+    },
+  },
+  plugins: [],
+};

package/src/tailwindcss.stories.tsx

@@ -6,19 +6,62 @@ export default {
 export const Default = () => {
   return (
     <div>
-      <div>@fe-free/core 扩展的</div>
+      <div>@fe-free/core 扩展的 </div>
+      <h1>tailwindcss</h1>
+      <h2>textColor</h2>
       <div>
-        <div className="text-primary">text-primary</div>
-        <div className="text-secondary">text-secondary</div>
-        <div className="text-desc">text-desc</div>
+        <div className="bg-black px-2 text-00">text-00</div>
+        <div className="text-01">text-01</div>
+        <div className="text-02">text-02</div>
+        <div className="text-03">text-03</div>
+        <div className="text-04">text-04</div>
       </div>
+      <h2>borderColor</h2>
+      <div className="space-y-2">
+        <div className="border border-solid border-01">border-01</div>
+        <div className="border border-solid border-02">border-02</div>
+        <div className="border border-solid border-03">border-03</div>
+      </div>
+      <h2>backgroundColor</h2>
+      <div>
+        <div className="bg-00">bg-00</div>
+        <div className="bg-005">bg-005</div>
+        <div className="bg-01">bg-01</div>
+        <div className="bg-02">bg-02</div>
+        <div className="bg-03">bg-03</div>
+      </div>
+      <h2>colors</h2>
+      <div>
+        <div className="bg-primary">bg-primary</div>
+      </div>
+      <h2>colors - themeColor</h2>
+      <div>
+        <div className="bg-theme09">theme09</div>
+        <div className="bg-theme08">theme08</div>
+        <div className="bg-theme05">theme05</div>
+        <div className="bg-theme03">theme03</div>
+        <div className="bg-theme02">theme02</div>
+      </div>
+      <h2>colors - redColor</h2>
+      <div>
+        <div className="bg-red09">red09</div>
+        <div className="bg-red08">red08</div>
+        <div className="bg-red05">red05</div>
+        <div className="bg-red03">red03</div>
+      </div>
+      <h2>colors - greenColor</h2>
+      <div>
+        <div className="bg-green09">green09</div>
+        <div className="bg-green08">green08</div>
+        <div className="bg-green05">green05</div>
+        <div className="bg-green03">green03</div>
+      </div>
+      <h2>colors - yellowColor</h2>
       <div>
-        <div className="fec-border-bottom">fec-border-bottom</div>
-        <div className="fec-border-top">fec-border-top</div>
-        <div className="fec-border-left">fec-border-left</div>
-        <div className="fec-border-right">fec-border-right</div>
-        <div className="fec-bg">fec-bg</div>
-        <div className="fec-bg-hover">fec-bg-hover</div>
+        <div className="bg-yellow09">yellow09</div>
+        <div className="bg-yellow08">yellow08</div>
+        <div className="bg-yellow05">yellow05</div>
+        <div className="bg-yellow03">yellow03</div>
       </div>
     </div>
   );

package/src/theme.ts

@@ -0,0 +1,48 @@
+const themeVariables = {
+  color: {
+    primary: '#0374e9',
+
+    // 目前是主题蓝
+    theme09: '#0368d2',
+    theme08: '#0374e9',
+    theme05: '#a2cbf7',
+    theme03: '#e6f1fd',
+    theme02: '#f0f7fe',
+
+    red09: '#e64547',
+    red08: '#ff4d4f',
+    red05: '#ffb8b9',
+    red03: '#ffeded',
+
+    green09: '#01a468',
+    green08: '#01b673',
+    green05: '#9be5c8',
+    green03: '#ddf9ec',
+
+    yellow09: '#bf7a05',
+    yellow08: '#faad14',
+    yellow05: '#eecf9b',
+    yellow03: '#f6e7cd',
+  },
+  textColor: {
+    '00': '#ffffff',
+    '01': '#15191e',
+    '02': '#444444',
+    '03': '#777777',
+    '04': '#94999f',
+  },
+  borderColor: {
+    '01': '#e2e7f0',
+    '02': '#d5dde9',
+    '03': '#c0c7d2',
+  },
+  backgroundColor: {
+    '00': '#ffffff',
+    '005': '#f1f3f5',
+    '01': '#ececec',
+    '02': '#d9d9d9',
+    '03': '#c0c0c0',
+  },
+} as const;
+
+export { themeVariables };

package/src/tree/file_tree.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof FileTree> = {
   decorators: [
     (Story) => {
       return (
-        <div className="fec-border w-[200px] overflow-y-auto">
+        <div className="w-[200px] overflow-y-auto border border-01">
           <Story />
         </div>
       );
@@ -22,6 +22,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: '某某公司',
+    titleDescription: '某某公司的描述',
     enableSearch: true,
     actions: ['create', 'update', 'delete'],
     requestCreateByValues: (values) => {

package/src/tree/file_tree.tsx

@@ -106,7 +106,7 @@ function More({
     actions?.includes('create') &&
       !isCreateHidden && {
         label: isCreateDisabled ? (
-          <div className="cursor-not-allowed text-desc">新建子目录</div>
+          <div className="cursor-not-allowed text-03">新建子目录</div>
         ) : (
           <Detail
             action="create"
@@ -120,7 +120,7 @@ function More({
     actions?.includes('update') &&
       !isUpdateHidden && {
         label: isUpdateDisabled ? (
-          <div className="cursor-not-allowed text-desc">编辑</div>
+          <div className="cursor-not-allowed text-03">编辑</div>
         ) : (
           <Detail
             action="update"
@@ -134,7 +134,7 @@ function More({
     actions?.includes('delete') &&
       !isDeleteHidden && {
         label: isDeleteDisabled ? (
-          <div className="cursor-not-allowed text-desc">删除</div>
+          <div className="cursor-not-allowed text-03">删除</div>
         ) : (
           <OperateDelete
             name={nodeData.title}
@@ -192,7 +192,7 @@ function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
             />
           )}
           <div className="flex-1 truncate">{nodeData.title}</div>
-          <div className={classNames('text-desc', { 'group-hover:hidden': hasMore })}>
+          <div className={classNames('text-03', { 'group-hover:hidden': hasMore })}>
             {nodeData.children?.length || 0}
           </div>
           {hasMore && (

package/src/tree/tree.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof Tree> = {
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <div className="fec-border w-[300px]">
+      <div className="w-[300px] border border-01">
         <Story />
       </div>
     ),

package/src/tree/tree.tsx

@@ -187,7 +187,7 @@ function Tree<T extends DataNode>(props: TreeProps<T>) {
               <div className="flex gap-2 px-2">
                 <div className="flex-1">
                   <div className="truncate">{title}</div>
-                  {titleDescription && <div className="text-desc">{titleDescription}</div>}
+                  {titleDescription && <div className="text-03">{titleDescription}</div>}
                 </div>
                 {titleExtra}
               </div>

package/src/upload/index.tsx

@@ -141,13 +141,13 @@ function UploadDragger(props: ImageUploadDraggerProps) {
         <p className={classNames('ant-upload-drag-icon')}>
           <InboxOutlined
             className={classNames({
-              '!text-desc': isDisabled,
+              '!text-03': isDisabled,
             })}
           />
         </p>
         <p
           className={classNames('ant-upload-text', {
-            '!text-desc': isDisabled,
+            '!text-03': isDisabled,
           })}
         >
           点击或拖拽到此区域进行上传

package/src/tailwind.config.js

@@ -1,15 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        primary: '#1677ff',
-        /** 次要文本 */
-        secondary: 'rgba(0, 0, 0, 0.65)',
-        /** 描述文本 */
-        desc: 'rgba(0, 0, 0, 0.45)',
-      },
-    },
-  },
-  plugins: [],
-};