index.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <title>{$Think.config.app.app_name}简易安装向导</title>
  7. <link rel="stylesheet" href="__STATIC__/elementui/element-ui.css">
  8. <script src="__STATIC__/js/vue.js"></script>
  9. <script src="__STATIC__/js/jquery-2.0.3.min.js"></script>
  10. <script src="__STATIC__/elementui/element-ui.js"></script>
  11. </head>
  12. <body>
  13. <div id="el-app">
  14. <el-card class="box-card header-card" style="margin-bottom: 20px;">
  15. <header class="header" align="center">
  16. <div class="header-content">
  17. <div class="header-logo">
  18. <el-avatar src="{$Think.config.app.app_logo}" :size="50">
  19. </el-avatar>
  20. </div>
  21. <div class="contact-us" align="left">
  22. <div><a class="main-color" href="http://im.raingad.com/index.html"> {$Think.config.app.app_name} </a>for {$Think.config.app.app_verison} 安装向导</div>
  23. <div>QQ交流群: <a href="https://qm.qq.com/q/RgHdvLGiMk" target="_blank">1031495465</a></div>
  24. </div>
  25. </div>
  26. </header>
  27. </el-card>
  28. <el-card class="container box-card" style="padding:0">
  29. <el-steps :active="action" simple finish-status="success">
  30. <el-step title="IM介绍"> </el-step>
  31. <el-step title="环境检测"> </el-step>
  32. <el-step title="连接数据库"> </el-step>
  33. <el-step title="安装完成"> </el-step>
  34. </el-steps>
  35. <div class="step-item" v-if="action==0">
  36. <div class="setting-version">
  37. <h2>应用介绍</h2>
  38. <p><span class="main-color"> {$Think.config.app.app_name} </span>是由个人开发者《<a href="https://gitee.com/lvzhe-lcoce" target="_blank">raingad@foxmail.com</a>》开发,以下简称“本软件”,用户出于自愿而使用本软件,必须了解使用本软件的风险,本软件只用作学习交流使用,我们不承诺对免费用户提供任何形式的技术支持,并且不能作为商业用途使用,若因为使用本软件产生的侵权行为一律与作者无关。严禁将源码用于木马、病毒、色情、赌博、诈骗等违反国家法律法规行业,如发现有使用本软件进行非法活动,将向有关部门举报和协助相关行政执法机关清查!本软件作为开源项目提供,在法律允许的最大范围内,开发者不对软件的功能性、安全性或适用性作出任何形式的保证,无论是明示的还是暗示的。
  39. <h2>免责声明</h2>
  40. <h3>1. 基本声明</h3>
  41. <p>本软件作为开源项目提供,在法律允许的最大范围内,开发者不对软件的功能性、安全性或适用性作出任何形式的保证,无论是明示的还是暗示的。</p>
  42. <h3>2. 使用风险声明</h3>
  43. <p>2.1 本软件按&quot;现状&quot;提供,使用者需自行承担使用本软件的全部风险。<br />
  44. 2.2 开发者不对软件的运行可靠性、适用性或与特定需求的兼容性提供任何保证。<br />
  45. 2.3 使用者应在充分评估风险的基础上决定是否使用本软件。</p>
  46. <h3>3. 责任限制与豁免</h3>
  47. <p>在任何情况下,开发者及其关联方均不对因使用或无法使用本软件而导致的任何损失或损害承担责任,包括但不限于:</p>
  48. <ul>
  49. <li>数据丢失或泄露</li>
  50. <li>利润损失</li>
  51. <li>系统中断</li>
  52. <li>商业机会损失</li>
  53. <li>其他直接、间接或衍生性损失</li>
  54. </ul>
  55. <h3>4. 用户义务与责任</h3>
  56. <p>4.1 使用者应确保其对本软件的使用符合所有适用的法律法规要求。<br />
  57. 4.2 对本软件进行修改、分发或二次开发的使用者,需自行承担由此产生的全部责任,包括但不限于:</p>
  58. <ul>
  59. <li>法律风险</li>
  60. <li>知识产权风险</li>
  61. <li>安全风险</li>
  62. <li>数据保护责任</li>
  63. </ul>
  64. <h3>5. 开发者权利</h3>
  65. <p>5.1 开发者保留对本软件进行更新、修改、调整或停止维护的权利。<br />
  66. 5.2 开发者可能在不事先通知的情况下修改本软件或相关服务。<br />
  67. 5.3 开发者保留对本免责声明进行修改的权利。</p>
  68. <h3>6. 其他条款</h3>
  69. <p>6.1 本免责声明的任何部分被认定为无效或不可执行时,其余部分仍然有效。<br />
  70. 6.2 本免责声明的最终解释权归开发者所有。<br />
  71. 6.3 如果本软件涉及部分三方开源插件,如有侵权行为,请联系作者删除!</p>
  72. </p>
  73. <h2> 软件地址:</h2>
  74. <p>前端地址:<a href="https://gitee.com/raingad/im-chat-front" target="_blank">https://gitee.com/raingad/im-chat-front</a></p>
  75. <p>后端地址:<a href="https://gitee.com/raingad/im-instant-chat" target="_blank">https://gitee.com/raingad/im-instant-chat</a></p>
  76. <h2> 支持功能:</h2>
  77. <ul>
  78. <li v-for="item in funcList">${item.text}</li>
  79. </ul>
  80. </div>
  81. <div class="setting-version" style="color: #a6a6a6">
  82. <p>后端技术栈:thinkphp6+workerman+redis</p>
  83. <p>前端技术栈:vue+Lemon-IMUI+element-UI</p>
  84. <p>桌面端:vue2+Lemon-IMUI+element-UI + electron [联系作者,捐赠获取]</p>
  85. <p>移动端:uniapp for vue3 + pinia [联系作者,捐赠获取]</p>
  86. </div>
  87. </div>
  88. <div class="step-item" v-if="action==1">
  89. <h4>环境状态</h4>
  90. <el-table :data="env" border style="width: 100%" size="mini">
  91. <el-table-column prop="name" label="检查项" align="center">
  92. </el-table-column>
  93. <el-table-column prop="description" label="建议要求" width="300px" align="center">
  94. </el-table-column>
  95. <el-table-column prop="value" label="当前环境" align="center">
  96. </el-table-column>
  97. <el-table-column prop="status" label="是否通过" align="center">
  98. <template slot-scope="scope">
  99. <span :class="scope.row.status === 'ok' ? 'fc-success' : 'fc-danger'">${scope.row.status}</span>
  100. </template>
  101. </el-table-column>
  102. </el-table>
  103. <h4>文件夹权限</h4>
  104. <el-table :data="dir" border style="width: 100%" size="mini">
  105. <el-table-column prop="dir" label="目录检查项" width="300px" align="center">
  106. </el-table-column>
  107. <el-table-column prop="value" label="当前环境" align="center">
  108. </el-table-column>
  109. <el-table-column prop="status" label="是否通过" align="center">
  110. <template slot-scope="scope">
  111. <span :class="scope.row.status === 'ok' ? 'fc-success' : 'fc-danger'">${scope.row.status}</span>
  112. </template>
  113. </el-table-column>
  114. </el-table>
  115. <div align="center" style="margin-top:15px;">
  116. <el-button round @click="reCheckEnv" :loading="loading">重新检测</el-button>
  117. </div>
  118. </div>
  119. <div class="step-item" v-if="action==2" align="center">
  120. <div class="step-form">
  121. <el-alert
  122. title="如果未设置成功,请将根目录下[example.env]更名为为[.env],并填写好相关参数"
  123. type="warning">
  124. </el-alert>
  125. <el-form ref="form" :model="form" label-width="120px">
  126. <h4>请填写网站信息</h4>
  127. <el-form-item label="网站域名">
  128. <el-input v-model="form.domain"></el-input>
  129. </el-form-item>
  130. <el-alert
  131. title="域名需要带协议头端口号(如果不是80或者443):http(s)://域名:8888,尾部不要带'/'."
  132. type="info">
  133. </el-alert>
  134. <h4>请填写数据库信息</h4>
  135. <el-form-item label="服务器地址">
  136. <el-input v-model="form.hostname">
  137. <template slot="append">数据库地址一般为:127.0.0.1</template>
  138. </el-input>
  139. </el-form-item>
  140. <el-form-item label="数据库">
  141. <el-input v-model="form.database"></el-input>
  142. </el-form-item>
  143. <el-form-item label="表前缀">
  144. <el-input v-model="form.prefix">
  145. <template slot="append">默认为yu_</template>
  146. </el-input>
  147. </el-form-item>
  148. <el-form-item label="数据库用户名">
  149. <el-input v-model="form.username">
  150. <template slot="append">生产环境建议创建独立账户</template>
  151. </el-input>
  152. </el-form-item>
  153. <el-form-item label="数据库密码">
  154. <el-input v-model="form.password"></el-input>
  155. </el-form-item>
  156. <el-form-item label="端口">
  157. <el-input v-model="form.hostport">
  158. <template slot="append">数据库端口一般为:3306</template>
  159. </el-input>
  160. </el-form-item>
  161. <h4>redis配置</h4>
  162. <el-form-item label="服务器地址">
  163. <el-input v-model="form.redishost">
  164. <template slot="append">默认为127.0.0.1</template>
  165. </el-input>
  166. </el-form-item>
  167. <el-form-item label="端口">
  168. <el-input v-model="form.redisport">
  169. <template slot="append">默认为6379</template>
  170. </el-input>
  171. </el-form-item>
  172. <el-form-item label="密码">
  173. <el-input v-model="form.redispass">
  174. <template slot="append">可以为空</template>
  175. </el-input>
  176. </el-form-item>
  177. </el-form>
  178. </div>
  179. </div>
  180. <div class="step-item" v-if="action==3">
  181. <p>开始安装...</p>
  182. <div id='install-process'>
  183. </div>
  184. </div>
  185. <div class="step-item" v-if="action==4">
  186. <div class="setting-version">
  187. <p>您已成功安装本程序,现在您还需最后一步即可使用聊天程序!</p>
  188. <p>管理员账号:<b style="font-size:18px">administrator</b>;密码:<b style="font-size:18px">123456</b>;进入后再聊天界面的左下角可以进入后台。</p>
  189. <h4>启动消息推送</h4>
  190. <p>进入系统后台管理后,在的右上方点击启动图标,启动服务,如果无法启动请参阅文档</p>
  191. <p>windows不再提供支持</p>
  192. <p>PS:消息推送必须在nginx配置文件中配置反向代理,代码已经贴到readme.md里面了。</p>
  193. <h4>前台地址:</h4>
  194. <p>浏览器访问:<a href="{:getMainHost()}/index.html">{:getMainHost()}/index.html</a></p>
  195. <div>QQ交流群: <a href="https://qm.qq.com/q/RgHdvLGiMk" target="_blank">1031495465</a></div>
  196. </div>
  197. </div>
  198. <hr style="border: 1px solid #f5f5f5;">
  199. <div class="next-button" align="center" v-if="!isDone">
  200. <el-button @click="pre" :disabled="preDisabled" v-text="preText"></el-button>
  201. <el-button type="primary" @click="next" :disabled="nextDisabled" v-text="nextText"></el-button>
  202. </div>
  203. <div class="next-button" align="center" v-if="isDone">
  204. <el-button type="success" @click="openSys" v-text="doneText"> </el-button>
  205. </div>
  206. </el-card>
  207. <div class="footer-wrapper" align="center">
  208. <footer class="footer">
  209. ©{:date("Y")} {$Think.config.app.app_name} for {$Think.config.app.app_version}
  210. </footer>
  211. </div>
  212. </div>
  213. </body>
  214. <script>
  215. var app = new Vue({
  216. delimiters: ['${', '}'],
  217. el: '#el-app',
  218. data() {
  219. return {
  220. action: 0,
  221. preDisabled: true,
  222. nextDisabled: false,
  223. preText: "上一步",
  224. nextText: "下一步",
  225. isDone: false,
  226. doneText: '进入系统',
  227. env: [],
  228. dir: [],
  229. database: [],
  230. status: 1,
  231. loading: false,
  232. form: {
  233. domain:'',
  234. hostname: '127.0.0.1',
  235. database: 'im',
  236. username: 'root',
  237. password: '',
  238. hostport: 3306,
  239. prefix: 'yu_',
  240. redishost: '127.0.0.1',
  241. redisport: '6379',
  242. redispass: '',
  243. },
  244. funcList:[
  245. {
  246. icon:'el-icon-chat-line-round',
  247. text:'支持单聊和群聊,支持发送表情、图片、语音、视频和文件消息',
  248. },
  249. {
  250. icon:'el-icon-potato-strips',
  251. text:'单聊支持消息已读未读的状态显示,在线状态显示',
  252. },
  253. {
  254. icon:'el-icon-user',
  255. text:'群聊创建、删除和群成员管理、群公告、群禁言、@群成员等',
  256. },
  257. {
  258. icon:'el-icon-ice-cream-round',
  259. text:'支持置顶联系人,消息免打扰;支持设置新消息声音提醒,浏览器通知',
  260. },
  261. {
  262. icon:'el-icon-video-camera',
  263. text:'支持一对一音视频通话(和移动端不互通)',
  264. },
  265. {
  266. icon:'el-icon-milk-tea',
  267. text:'支持文件、图片和绝大部分媒体文件在线预览',
  268. },
  269. {
  270. icon:'el-icon-mobile-phone',
  271. text:'支持移动端(由uniapp开发,可打包H5、APP和小程序),支持简易后台管理',
  272. },
  273. {
  274. icon:'el-icon-mobile-phone',
  275. text:'支持企业模式和社交模式,社交模式支持注册、添加好友功能',
  276. },
  277. ]
  278. }
  279. },
  280. watch: {
  281. action(val) {
  282. this.status = 1;
  283. if (val == 0) {
  284. this.preDisabled = true;
  285. } else {
  286. this.preDisabled = false;
  287. }
  288. if (val == 1) {
  289. this.getEnv();
  290. }
  291. if (val == 3) {
  292. this.process('正在写入数据库...');
  293. var _this = this;
  294. this.status=0;
  295. setTimeout(function() {
  296. _this.install()
  297. }, 1000);
  298. } else {
  299. $('#install-process').html('');
  300. }
  301. if (val == 4) {
  302. this.isDone = true;
  303. }
  304. },
  305. status(val) {
  306. if (val == 0) {
  307. this.nextDisabled = true;
  308. } else {
  309. this.nextDisabled = false;
  310. }
  311. }
  312. },
  313. mounted(){
  314. let domain="{:getMainHost()}";
  315. this.form.domain=domain
  316. },
  317. methods: {
  318. next() {
  319. if (this.action == 2) {
  320. this.checkDatabase();
  321. } else if (this.action < 4) {
  322. this.action++;
  323. }
  324. },
  325. pre() {
  326. if (this.action > 0) {
  327. this.action--;
  328. }
  329. },
  330. openSys() {
  331. window.location.href = "{:getMainHost()}/index.html";
  332. },
  333. getEnv() {
  334. var _this = this;
  335. $.post("{:url('install/getEnv')}", {}, function(res) {
  336. if (res.code == 0) {
  337. _this.env = res.data.env;
  338. _this.dir = res.data.dir;
  339. _this.status = res.data.status;
  340. }
  341. _this.loading = false;
  342. })
  343. },
  344. checkDatabase() {
  345. var _this = this;
  346. $.post("{:url('install/checkDatabase')}", {
  347. form: this.form
  348. }, function(res) {
  349. if (res.code == 0) {
  350. _this.status = res.data.status;
  351. _this.action++;
  352. } else {
  353. _this.$message.error(res.msg);
  354. }
  355. _this.loading = false;
  356. })
  357. },
  358. install() {
  359. this.status = 0;
  360. var _this = this;
  361. $.post("{:url('install/install')}", {}, function(res) {
  362. if (res.code == 0) {
  363. setTimeout(function() {
  364. _this.process('数据库写入成功,执行sql语句 ' + 1 + ' 条!');
  365. setTimeout(function() {
  366. _this.process('正在跳转...');
  367. setTimeout(function() {
  368. _this.action++;
  369. }, 1000);
  370. }, 1000);
  371. }, 1000);
  372. _this.status = res.data.status;
  373. } else {
  374. setTimeout(_this.process("<span class='fc-danger'>" + res.msg + "</span>"), 1000);
  375. _this.isDone = true;
  376. }
  377. _this.loading = false;
  378. })
  379. },
  380. reCheckEnv() {
  381. this.loading = true;
  382. this.getEnv();
  383. },
  384. process(text) {
  385. var html = "<p>" + text + "</p>";
  386. this.$nextTick(() => {
  387. $('#install-process').append(html);
  388. });
  389. }
  390. }
  391. })
  392. </script>
  393. <style>
  394. body {
  395. background-color: #f5f5f5;
  396. margin: 0;
  397. padding: 0
  398. }
  399. .header-card {
  400. margin-bottom: 15px;
  401. }
  402. .header-card .el-card__body {
  403. padding: 10px;
  404. }
  405. .header-content {
  406. display: flex;
  407. flex-direction: row;
  408. align-items: center;
  409. flex-wrap: nowrap;
  410. justify-content: flex-start;
  411. width: 320px;
  412. }
  413. .header-logo {
  414. margin-right: 20px;
  415. }
  416. .contact-us {
  417. margin: 10px 0;
  418. }
  419. .main-color {
  420. color: #409eff;
  421. }
  422. .step-item {
  423. height: calc(100vh - 340px);
  424. overflow: auto;
  425. padding: 20px;
  426. }
  427. .container {
  428. width: 800px;
  429. margin: 0 auto;
  430. }
  431. .container .el-card__body {
  432. padding: 0
  433. }
  434. .next-button {
  435. margin: 12px 0;
  436. }
  437. .setting-version,
  438. .install-process {
  439. line-height: 1.3;
  440. }
  441. .step-form {
  442. width: 600px
  443. }
  444. .el-input-group__append {
  445. width: 190px;
  446. }
  447. .footer-wrapper {
  448. margin: 15px auto;
  449. color: #888888
  450. }
  451. .fc-danger {
  452. color: #f56c6c;
  453. }
  454. .fc-warning {
  455. color: #e6a23c;
  456. }
  457. .fc-success {
  458. color: #67c23a;
  459. }
  460. .fc-info {
  461. color: #909399;
  462. }
  463. .fc-primary {
  464. color: #409eff;
  465. }
  466. </style>
  467. </html>