简体中文 | English
- This project is based on the Luckysheet source code modification. Please follow the original author's open source agreement, and do not delete or modify the source code header copyright statement。
- This project is open sourced under the Apache 2.0 protocol, so please feel free to use it. At the same time, this project will also contribute to the Luksysheet community, enriching the community ecosystem. Thank you again to the @Luckysheet team ❤️
- The project is Luckysheet Collaborative Enhanced Edition (fully functional implementation), aiming to provide collaborative implementation ideas, data storage services, collaborative demonstrations, etc. The project is based on Luckysheet Implemented, thank you to the original author for open-source.
- This project mainly implements the collaborative function module, which has no impact on other content. The parts modified based on the source code are all reflected in the
Luckysheet sourcefolder. - The project supports optional database services. User data without a database cannot be persistently stored, and collaborative functionality is not affected.
- Project Use Sequelize As an ORM data service technology, it supports databases such as MySQL, SQLite, PostgreSQL, and MSSQL, making it easy for users to quickly migrate.
- The project uses Typescript as the main development language, providing complete type prompts, standardizing code, and improving development efficiency.
- The project has a
masterbranch and amaster-alphabranch. The latest released features will be tested on alpha and will be merged into master after stabilization - My personal energy is limited, and there are bugs and incomplete functions. Please submit an issue and I will handle it promptly;
- Welcome everyone to fork the project, submit PR, and work together to improve the project.
- Please note that there is no Luckymeet source code available for the startup, operation, deployment, and other stages of this project, which does not affect the actual collaborative functionality。
- In order to better drive open source, starting from the git head of
bf75470121f0f52737e604233add82ad2502218d, the source code modification part will no longer be provided. If necessary, please contact the author for a fee to obtain it。 - The lack of Luckysheet source code does not affect the actual functionality, and all collaborative features are open source。
- The impact of no source code:
- The source code is only used for functional expansion in binary scenarios;
- If there is no requirement for secondary opening, you do not need to use the source code. If there is a requirement for secondary opening, please contact the author for payment first；
- Please note that:
1.Luckysheet source will be retained, but will not be continuously updated. Subsequent feature upgrades will only provide lib plugin packages；
- Fee standard:
￥ 99 - Provide services: Only provide source code packages (do not provide continuous feature upgrades, bug fixes, and not purchase products!)
- Fee standard:
- Contact Author：
- qq group: 522121825 (recommend)
- Clone project：
git clone https://gitee.com/wfeng0/luckysheet-crdt- Download dependencies:
## "dep": "npm install --s && cd server && npm install --s"
npm run dep⛔️ Tips：
1. Project dependencies are divided into front-end dependencies and back-end dependencies (independent projects)；
2. We recommend using `npm install` to install dependencies and avoid version conflicts；
3. If the dependency download error occurs, you can try deleting the `package lock. json` file and re executing the dependency installation;
4. If executing the command 'npm run dep' reports an error，Please try executing the 'npm install -- s' command for front-end dependency installation，Execute the 'cd server && npm install -- s' command for background dependency installation。
**If the error persists, please confirm if the environment meets the operating conditions：**
`node -v ==> v20.x.x` // 请确保 node 版本大于 18
`npm -v ==> 10.x.x` // 请确保 npm 版本大于 7.x.x- 🚫
If there is no database service, please skip this step🚫 Configure database parameters：
// server/src/Config/index.ts
export const SQL_CONFIG = {
port: 3306,
host: "127.0.0.1", // localhost or 127.0.0.1
database: "luckysheet_crdt",
user: "root",
password: "root",
};- 🚫
If there is no database service, please skip this step🚫 Synchronize database tables：
npm run db⛔️ Tips：
1. Please ensure that the database configuration is correct and available
2. Please ensure that the project executes synchronized database commands `npm run db`
3. The project cycle only needs to be executed once to ensure the existence of table structures in the database。- Start Service:
- Front-desk service：
npm run dev - Back-up services：
npm run server
- Front-desk service：
- Open the URL：
http://localhost:5000|http://localhost:9000, You can experience the collaborative function.
- Pack the front-end project first:
npm run build
build: {
// Package output directory - will automatically package to the server directory
outDir: "./server/public/dist",
rollupOptions: {
input: {
// Front end entrance file - Please note that the entry used is the entrance file
main: "./entry.html",
},
},
},- Deployment server
// 1. When the server is running, it will automatically build a build directory containing JS files. Please deploy the following folder to the server:
- 🗂️wwwroot
+ 📂build // js files
+ 📂public // Static resources
+ 🗒️package-lock.json
+ 🗒️package.json- Install node on the server
// Related tutorials can be searched online by oneself, and this example provides：- Start Server：
npm run serveWait for compilation to complete, start the service, and access thehttp://${ip}:9000after deployment is complete
| functional module | Implemented | Unrealized |
|---|---|---|
| File operation | ✅️ import file ✅️ export file(Not implemented) | |
| Cell operation | ✅️ Single cell operation ✅️ Range cell operation | |
| Config operation | ✅️ Line hidden ✅️ Column hidden ✅️ Modify row height ✅️ Modify column width | |
| Universal save | ✅️ Change worksheet name ✅️ Change worksheet color ✅️ Merge cell | ❌️ Freeze rows and columns ❌️ Filter scope ❌️ Specific settings for filtering ❌️ Alternating colors ❌️ Conditional formatting ❌️ PivotTable ❌️ Dynamic array |
| Function chain operation | ❌️ Function chain operation | |
| Row and column operation | ✅️ Delete rows or columns ✅️ Add rows or columns | |
| Filter operations | ❌️ Clear filter ❌️ Restore filter | |
| Sheet operations | ✅️ Add sheet ✅️ Copy sheet ✅️ Delete sheet ✅️ Restore sheet ✅️ Adjust the position of the sheet Switch to the specified sheet | |
| Sheet attribute | ✅️ Hidden or displayed | |
| Table information change | ✅️ Change workbook name | |
| Chart operation | ✅️ Add chart ✅️ Move chart ✅️ Zoom chart ✅️ Update chart options |
- Front desk service port：
5000 - Back up service port：
9000 - Database service port：
3306
// 1️⃣ Backend service port configuration：server/src/Config/index.ts
export const SERVER_PORT = 9000;// 2️⃣ Database service port configuration：server/src/Config/index.ts
export const SQL_CONFIG = {
port: 3306,
// ... other config
};// 3️⃣ Front desk service port configuration：src/config/index.ts
// Export backend service address
export const SERVER_URL = "http://localhost:9000";
// Export collaborative service address
export const WS_SERVER_URL = "ws://127.0.0.1:9000";- Source code UI refactoring, please refer to Luckysheet-source-recover-style
- Implemented vchart, please refer to Luckysheet-source-vchart On the left is' vchart 'rendering, and on the right is' chartmix' rendering
- Expand the implementation of chart data update linkage: chartmix
vchart
Original effect:
After optimization:
Support collaboration~
// 1. Configure import plugin
const options = {
// ...other config
plugins: ["fileImport"],
}
luckysheet.create(options)matters needing attention:
- File import depends on the
luckyuexcelplugin； - Therefore, some functions are limited by plugins. If you need to expand them, please implement them yourself!
- Please configure plugins correctly Use the import function after
fileImport.
// 1. Configure export plugin
const options = {
// ...other config
plugins: ["fileExport"],
}
luckysheet.create(options)matters needing attention:
- File import depends on the
exceljs | file-saverplugin； - Therefore, some functions are limited by plugins. If you need to expand them, please implement them yourself!
- Please configure plugins correctly Use the import function after
fileExport.
Configuration:
const options = {
lang: "zh",
title: "Luckysheet",
// ...other config
// menuHandler config
menuHandler:{
hideDefaultMenu: string[], // importFile | exportFile
customs: MenuHandlerCustomsItem[]
}
}
type MenuHandlerCustomsItem = {
label: string
value: string
callback: () => void
order?: string // Menu sorting, the smaller one is on top, the default menu order=10 is on top of the default menu, it needs to be smaller than 10, and it will not be transferred. It will be placed below by default
icon?: string
} |
// Partition line configuration object
{
value: 'divider'
}example
menuHandler: {
customs: [
{
label: '保存',
value: 'saveFile',
order: 1
},
{ value: 'divider', order: 2 }
]
}- When importing files, prompt
file format error：
At present, only xlsx format is supported.
Please check if the file format is correct.- The page displays
Collaboration service unavailable, currently in normal mode：
try {
const { data } = await fetch({
url: "/api/getWorkerBook",
method: "post",
data: { gridKey },
});
}
catch (error) {}
If and only if! When a fetch request fails, it will enter the catch block,
At this time, it will prompt 'Collaboration service unavailable, currently in normal mode';
Please check if the service is functioning properly. There are generally the following possibilities:
1. Service exception
2. Database exception
3. Abnormal database table structure- Chaotic database data:
The only possible reason for this is that the application does not have a relevant delete statement,
It's not that I don't write, but rather that everyone expands based on their actual business needs.
The following steps can restore:
1. Delete all data tables of luckyshev_crdt;
2. Execute npm run db to synchronize database tables;
3. Execute npm run server to start the service;
The appeal operation will create a database table by oneself and synchronize the latest model structure,
And create a gridkey demo worker books and worker sheets record;
If and only if there are recorded scenes in these two tables, the luckySheet can be rendered;
be careful! If there is no record in two tables, it may also cause the inability to collaborate (problem 2)
be careful! If there are records in the workersheets table, but deleteFlag is true, it will also result in the inability to render luckysheets;- Forefront resource reference exception
Note: Currently, all plugin dependencies in the source code are derived from absolute paths
// Dynamically load dependent scripts and styles
const dependScripts = [
"expendPlugins/libs/vue@2.6.11.min.js",
"expendPlugins/libs/vuex.min.js",
"expendPlugins/libs/elementui.min.js",
"expendPlugins/libs/echarts.min.js",
"expendPlugins/chart/chartmix.umd.min.js",
];
So, it will cause a problem that the actual project in the front-end is probably not the path of public/appendplugins/ * *. Please ensure that the expenndplugins directory is correctly placed and recognized.Handling method:
1. Source code packaging: `npm run build` ==> `dist` Place the directory into the `Accessing static resources`（`public`|`static`|`...`）；
2. Register plugin： `plugins:['chart']`
3. Analyze resource path:
1. If there are no other paths after the port, it should be placed in the public directory;
2. If there are other paths after the port, it should be placed in another directory, such as: static。
4. The file is backed up in the `dist` directory and can be copied directly。
- Customize the creation of chart types At present, creating charts in vchart is a random 'pie chart' | 'line chart'. If you want to implement custom chart type transfer, you need to modify the chartmix related source code. The specific steps can be referred to as follows：
1. Download Source：https://gitee.com/mengshukeji/chartMix
2. Modify the src/tiles/exportUtil.js create Chart method and add a chart type parameter;
3. Repackage and place the file into the project- Registration plugin error
Solution Review: Abnormal Reference to Front end Resources`- Submit an issue
- Fork this project and submit a PR
- Join the communication group:
